Less学习笔记 -- Mixins（混合）二

Posted 2020-08-15

高级参数和@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;
}