Less函数

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}

1，在#header中调用自定义函数border-radius,就会返回函数中的三个属性，相当于#header对象就有了这三个属性。； 2，自有属性与函数属性关系 还是后面的覆盖前面的。 3，函数的其他写法

 // 函数的参数设置默认值：
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
} 
// 函数有多个参数时用分号隔开
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}

// 函数如果没有参数，在转译成 css 时就不会被打印出来，详见上面混合中的示例
.wrap() {
  text-wrap: wrap;
}

// 函数参数如果有默认，调用时就是通过变量名称，而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}

// 函数参数有个内置变量 @arguments，相当于 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

 // 函数名允许相同，但参数不同，类似于 java 中多态的概念 

.mixin(@color: black) 

 .mixin(@color: black; @margin: 10px)