less 参数 LESS 高级参数和@rest Variable

less 参数

LESS 是一种动态样式语言，它可以使 CSS 更加灵活，更易于管理。LESS 允许你使用变量、函数、运算和混合来创建复杂的样式表。

LESS 参数是一个特殊的变量，它允许你在不同的文件中使用相同的值。它们可以用于定义颜色、字体大小、间距等，并且可以在不同的文件中重复使用。

@base-color: #f938ab;  // 基本颜色
@border-width: 1px;    // 边框宽度
@radius: 5px;          // 圆角半径

LESS 参数也可以用于函数中，例如：

 
.box-shadow(@x: 0, @y: 0, @blur: 1px, @color) {  // 阴影函数 
    box-shadow: @arguments;  // 这里使用了 LESS 的 arguments 变量 
} 

LESS 参数还可以用于 mixin （混入）中：

.rounded-corners (@radius: 5px) {   // 圆角 mixin  
    border-radius: @radius;   // 这里使用了 LESS 的 radius 参数  
} 

LESS 参数是一个非常有用的工具，它可以帮助你创建更加灵活、易于管理的 CSS 样式表。通过使用 LESS 参数，你可以在不同文件中重复使用相同的值，并且能够将这些值应用到函数和 mixin 中。

LESS 高级参数和@rest Variable

.mixin(...) {        // it matches arguments from 0-n
.mixin() {           // it matches exactly 0 arguments
.mixin(@x: 1) {      // it matches arguments from 0-1
.mixin(@x: 1; ...) { // it matches arguments from 0-n
.mixin(@x; ...) {

.mixin(@x; @rest...) {
   // after the variable @a, the @rest is bound to arguments
   // @arguments is bound to all arguments
}