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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Less学习笔记 -- Mixins(混合)二相关的知识,希望对你有一定的参考价值。

高级参数和@reset变量

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

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

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

Less:

.mixin1(...){
  padding:@arguments;
}
div{
  .mixin1(10px);
  div{
    .mixin1(20px 30px);
    div{
      .mixin1(40px 50px 60px);
      div{
        .mixin1(70px 80px 90px 100px)
      }
    }
  }
}


CSS:

div {
  padding: 10px;
}
div div {
  padding: 20px 30px;
}
div div div {
  padding: 40px 50px 60px;
}
div div div div {
  padding: 70px 80px 90px 100px;
}


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

Less:

.mixin2(){
  width:200px;
}
p{
  .mixin2;
}


CSS:

p {
  width: 200px;
}



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

Less:

.mixin3(@red1:#e4393c){
  color:@red1;
}
span{
  .mixin3;
}


CSS:

span {
  color: #e4393c;
}



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

Less:

.mixin4(@a:10px, ...){
  padding:@arguments;
}
div{
  .mixin4;
  p{
    .mixin4(2px,5px,2px 5px);
  }
}


CSS:

div {
  padding: 10px;
}
div p {
  padding: 2px 5px 2px 5px;
}



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

Less:

.mixin5(@a, ...){
  padding:@arguments;
}
ul{
  .mixin5(5px);
  li{
    .mixin5(2px 4px);
  }
}


CSS:

ul {
  padding: 5px;
}
ul li {
  padding: 2px 4px;
}















以上是关于Less学习笔记 -- Mixins(混合)二的主要内容,如果未能解决你的问题,请参考以下文章

less学习笔记

less学习笔记

less学习笔记

less学习笔记

less变量

less学习笔记