Less-minxin传参

Posted 2020-08-28 YanEr、

//mixin传参

--简单传参，example：
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.callUse{
    .border-radius(5px);
}

--带默认值传参，参数为可选,example:
.border-radius(@radius:5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.callUse{
    .border-radius;
}

//output css
.callUse {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

--多参调用,example:
.test(@height,@width,@border,@color){
    height:@height;
    width:@width;
    border:@border;
    color:@color;
}
.study{
    .test(100px,500px,2px,red);
}

//output css
.study {
  height: 100px;
  width: 500px;
  border: 2px;
  color: red;
}

--混合多参,example:
.test(@width){//一参可调用
    width:@width;
}
.test(@width,@padding:2px){//一参可调用，一参可选
    min-width:@width;
    padding:@padding;
}
.test(@width,@padding,@margin:2px){//两参可调用，一参可选
    max-width:@width;
    padding:@padding;
    margin:@margin;
}

//一参调用
.study{
    .test(500px)
}
//output css
.study {
  width: 500px;
  min-width: 500px;
  padding: 2px;
}

//两参调用
.study{
    .test(500px,5px);
}
//output css
.study {
  min-width: 500px;
  max-width: 500px;
  padding: 5px;
  margin: 2px;
}

//命名参数调用
.study{
    .test(@width:500px);
}
编译结果与一参调用时是一样的

.study{
    .test(@width:500px,@padding:5px);
}
编译结果与两参调用时是一样的


--@arguments多参同时调用
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.test {
  .box-shadow(2px; 5px);
}
//output css
.test {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

小结：未声明参数（没有默认值的参数）与未声明参数之间用“ ，”分隔
      已声明参数（有默认值的参数）与已声明参数之间用“ ；”分隔 
      
（这里对@rest不是很理解）

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6296828.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接