Function:
// func.less 

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

#header {
  .border-radius(4px);
}Copy the code
1. Calling the custom border-radius function in #header returns three attributes from the function, equivalent to the #header object having these three attributes. ;
2. Relationship between its own attributes and function attributes
Or the back over the front.
3. Other ways of writing the function

1. Calling the custom border-radius function in #header returns three attributes from the function, equivalent to the #header object having these three attributes. ; 2. The relation between the own attribute and the function attribute is the latter overwriting the former. 3. Other ways of writing the function

Border-radius (@radius: 5px) {-webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } // separate functions with semicolons when they have multiple arguments. Mixin (@color; @padding:2) { color-2: @color; padding-2: @padding; } // Functions with no arguments will not be printed when translated to CSS, as shown in the example in the mix above.wrap() { text-wrap: wrap; } // Function arguments are called by the variable name, not the location, if they have default values. @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color:#33acfe);} // Function arguments have a built-in variable @arguments, which is equivalent to arguments.box-shadow (@x: 0; @y: 0; @blur: 1px; @color:# 000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}Copy the code

// Function names can be the same, but arguments can be different, similar to the concept of polymorphism in Java

.mixin(@color: black) 

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