Less 混合方法（mixin）

混合（Mixins）

https://less.bootcss.com/features/#mixins

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

在历史上，mixin调用中的括号是可选的，但是可选的括号已被弃用，在未来的版本中将需要使用括号。

具有括号的混合

如果你想要创建一个mixin，但是你不希望这个mixin出现在你的css输出中，那么在mixin定义之后加上括号。

例如：

混合中的选择器

mixin不仅仅可以包含属性，它们还可以包含选择器。

例如：

命名空间

如果你想要在一个更复杂的选择器内部混合属性，你可以堆叠多个id或类。例如：

注意：传统的less语法允许在命名空间和mixin之间使用>和空格。这种语法已被弃用，可能会被移除。目前，这些功能是一样的：

像这样对你的mixin进行命名空间化可以减少与其它库的mixin或用户mixin之间的冲突，但也可以作为“组织”一组mixin的方式。例如：

保护性命名空间（Guarded Namespaces）

如果一个命名空间有一个守卫（guard），那么只有当守卫条件返回真时，才会使用它定义的mixin。命名空间守卫的评估方式与mixin上的守卫完全相同，因此以下两个mixins的工作方式相同：

条件为假时：

!important关键词

在mixin调用后使用!important关键字，以将所有继承的属性标记为!important。例如：

带参数的混合

如何传递参数给混合

mixin也可以接受参数，这些参数是在选择器块被混合时传递给它的变量。

例如：

参数的默认值

例如：

参数分隔符

参数当前可以是分号或逗号分隔的。

最初，参数只通过逗号分隔，但后来增加了分号，以支持将逗号分隔的列表值传递给单个参数。

• 两个参数，每个都包含逗号分隔的列表：.name(1, 2, 3; something, else)
  

• 三个参数，每个都包含一个数字：.name(1, 2, 3)
  

• 使用伪分号创建一个带有一个参数的mixin调用，该参数包含逗号分隔的css列表：.name(1, 2, 3;)
  

• 逗号分隔的默认值：.name(@param1: red, blue;)
  

• 从less 4.0开始，你可以使用括号转义[~()]来包装一个列表值，例如.name(@param1: ~(red,
  blue))。这与引用转义语法类似：~“quote”。
  

重载mixin

定义具有相同名称和参数数量的多个mixin是合法的。less将使用所有可以应用的属性。如果你使用了一个参数的mixin，例如.mixin(green);，那么所有只有一个强制参数的mixin的属性都将被使用。

例如：

命名参数

mixin引用可以通过参数名称而不是仅通过位置来提供参数值。任何参数都可以通过其名称被引用，它们不必按任何特殊顺序排列。

例如：

@arguments变量

在mixin内部，@arguments具有特殊含义，它包含了调用mixin时传递的所有参数。如果你不想处理单个参数，这很有用。

例如：

高级参数 和@rest变量

如果你想让你的mixin接受可变数量的参数，你可以使用...。在使用变量名之后使用这个将把那些参数分配给该变量。

.mixin(...) {        // 匹配 0-N 个参数
.mixin() {           // 精确匹配0个参数
.mixin(@a: 1) {      // 匹配 0-1 个参数
.mixin(@a: 1, ...) { // 匹配 0-N 个参数
.mixin(@a, ...) {    // 匹配 1-N 个参数

例如：

模式匹配

有时，你可能希望根据传递给mixin的参数来改变其行为。

例如：

我们还可以匹配参数的数量，例如：

将混入作为函数使用

从mixin调用中选择属性和变量。

属性/值访问器

从less 3.5开始，你可以使用属性/变量访问器从已评估的mixin规则中选择值。这可以让你像使用函数一样使用mixin。

例如：

覆盖mixin的值

如果有多个匹配的mixin，所有规则都会被评估并合并，并且会返回最后一个具有该标识符的匹配值。这与css中的级联类似，它允许你“覆盖”mixin的值。

例如：

未命名查找

如果在[@lookup]中没有指定查找值，而是在mixin或规则集调用后写[]，则所有值都会级联，并且将选择最后声明的值。

例如：

对于别名为mixin调用的规则集或变量，同样的级联行为也是正确的。例如：

递归mixin

在less中，一个mixin可以调用自身。这种递归mixin，当与守卫表达式和模式匹配结合使用时，可以用来创建各种迭代/循环结构。

例如：

mixin 守卫（Mixin Guards）

当你想根据表达式进行匹配时，守卫非常有用，与简单的值或参数数量相反。

例如：

守卫比较运算符

守卫中可用的完整比较运算符列表为：>, >=, =, =<, <。此外，关键字true是唯一的真实值，这使得这两个mixin等效：

除了关键字true之外的任何值都是假值：

你还可以将参数与彼此或非参数进行比较：

守卫逻辑运算符

你可以使用逻辑运算，语法基于css媒体查询。

用 and 关键词 结合守卫，例如：

你可以通过用逗号，分隔守卫来模拟或（or）运算符。如果任何一个守卫评估为真，就被视为匹配，例如：

利用not 关键词对条件取反，例如：

类型检查函数

如果你想根据值类型匹配mixin，可以使用is函数。例如：

基本的类型检查函数：

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

如果你想检查一个值除了是数字外是否还具有特定的单位，你可以使用以下其中一个：

• ispixel
• ispercentage
• isem
• isunit

别名mixin

将一个别名调用赋值给变量

mixin可以被分配给一个变量，以便作为变量调用，或者可以用于map查找。例如：

变量调用

整个mixin调用可以被别名，并作为变量调用。例如：

注意，与在根目录中使用的mixins不同，分配给变量并在没有参数的情况下调用的mixin调用始终需要括号。例如，下面的用法是错误的：

这是因为变量是被分配了一个选择器列表，还是一个mixin调用，这是不明确的。