Less學(xué)習(xí)筆記 -- Mixins（混合）二

高級(jí)參數(shù)和@reset變量

如果你希望你的mixin接受數(shù)量不定的參數(shù)，你可以使用“...”。在變量名后面使用它，它會(huì)將這些參數(shù)分配給變量

.mixin(...){/*接受0到N個(gè)參數(shù)*/}
.mixin(){/*不接受任何參數(shù)*/}
.mixin(@a:1){/*接受0到1個(gè)參數(shù)*/}
.mixin(@a:1;...){/*接受0到N個(gè)參數(shù)*/}
.mixin(@a;...){/*接受1到N個(gè)參數(shù)*/}

.mixin(...){ } 接受0到N個(gè)參數(shù)

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(){ } 不接受任何參數(shù) （這個(gè)其實(shí)就相當(dāng)于不輸出混合集）

Less：

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

CSS：

p {
  width: 200px;
}

.mixin(@a:1){ } 接受0到1個(gè)參數(shù)

Less：

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

CSS：

span {
  color: #e4393c;
}

.mixin(@a:1;...){ } 接受0到N個(gè)參數(shù)

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個(gè)參數(shù)

Less：

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

CSS：

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