Less-minxin傳參

//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

版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接