Less学习笔记 -- Mixins(混合)二-阿里云开发者社区

开发者社区> 技术小牛人> 正文

Less学习笔记 -- Mixins(混合)二

简介:
+关注继续查看

高级参数和@reset变量

如果你希望你的mixin接受数量不定的参数,你可以使用“...”。在变量名后面使用它,它会将这些参数分配给变量

1
2
3
4
5
.mixin(...){/*接受0到N个参数*/}
.mixin(){/*不接受任何参数*/}
.mixin(@a:1){/*接受0到1个参数*/}
.mixin(@a:1;...){/*接受0到N个参数*/}
.mixin(@a;...){/*接受1到N个参数*/}

.mixin(...){ } 接受0到N个参数

Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.mixin1(...){
  padding:@arguments;
}
div{
  .mixin1(10px);
  div{
    .mixin1(20px 30px);
    div{
      .mixin1(40px 50px 60px);
      div{
        .mixin1(70px 80px 90px 100px)
      }
    }
  }
}


CSS:

1
2
3
4
5
6
7
8
9
10
11
12
div {
  padding10px;
}
div div {
  padding20px 30px;
}
div div div {
  padding40px 50px 60px;
}
div div div div {
  padding70px 80px 90px 100px;
}


.mixin(){ } 不接受任何参数 (这个其实就相当于不输出混合集)

Less:

1
2
3
4
5
6
.mixin2(){
  width:200px;
}
p{
  .mixin2;
}


CSS:

1
2
3
p {
  width200px;
}



.mixin(@a:1){ } 接受0到1个参数

Less:

1
2
3
4
5
6
.mixin3(@red1:#e4393c){
  color:@red1;
}
span{
  .mixin3;
}


CSS:

1
2
3
span {
  color#e4393c;
}



.mixin(@a:1;...){ } 接受0到N个参数

Less:

1
2
3
4
5
6
7
8
9
.mixin4(@a:10px, ...){
  padding:@arguments;
}
div{
  .mixin4;
  p{
    .mixin4(2px,5px,2px 5px);
  }
}


CSS:

1
2
3
4
5
6
div {
  padding10px;
}
div p {
  padding2px 5px 2px 5px;
}



.mixin(@a;...){ } 接受1到N个参数

Less:

1
2
3
4
5
6
7
8
9
.mixin5(@a, ...){
  padding:@arguments;
}
ul{
  .mixin5(5px);
  li{
    .mixin5(2px 4px);
  }
}


CSS:

1
2
3
4
5
6
ul {
  padding5px;
}
ul li {
  padding2px 4px;
}






本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1863332







版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python零基础学习笔记(四)——数据类型
python数据类型:Number(数字):包括整数/浮点数(小数)/复数String(字符串)Boolean(布尔值)None(空值)list(列表)tuple(元组)dict(字典)set(集合)
1235 0
Linux sed命令学习
sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换、删除、新增、选取等特定工作,下面先了解一下sed的用法sed命令行格式为:         sed [-nefri] ‘command’ 输入文本         常用选项:        -n∶使用安静(silent)模式。
753 0
再学习之Spring(面向切面编程).
一、概念 1、理论     把横切关注点和业务逻辑相分离是面向切面编程所要解决的问题。如果要重用通用功能的话,最常见的面向对象技术是继承(inheritance)或 组成(delegation)。但是,如果在整个应用中都使用相同的基类,继承往往会导致一个脆弱的对象体系;而使用组成可能需要对委托对象进行复杂的调用。
856 0
【DOTA之后新里程碑】DeepMind强化学习重大突破:AI在多人射击游戏完胜人类!
继OpenAI之后,DeepMind也在多智能体强化学习方面秀肌肉:首次在第一人称射击游戏的多人模式中完胜人类,而且没有使用大量训练局数,轻松超过了人类水平。
1657 0
DC学院学习笔记(十三):探索性数据分析实践
探索性数据分析实践:画几个图瞅瞅长得啥样
1544 0
再读《Parallel Programming with Python》并作笔记
并发编程,在哪个语言里都属于高端应用,一定得会了才好意思说懂了这门语言。 在工作中用得并不是很多,忘了一些内容,就慢慢看,慢慢补上。 今天一天看了近三分之一(我看外文越来越快了??:)), 实践一下多线程的threading模块。
1114 0
Linux中常用命令【新手学习小白篇】
以下为Linux中常用命令【新手学习】新手上路,希望给你带来帮助
137 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载