Less-minxin传参

开发者子源技术 2022年11月10日

0 收藏 319 点赞 4,296 浏览 1593 个字

//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不是很理解）