Less - 作为函数的混合

LESS - 将 Mixins 用作函数

在 LESS 中，mixins（混合宏）的使用方式与传统编程语言中的函数非常相似。它们可以接受参数，定义局部变量，并封装可重用的 CSS 规则块。这种函数式行为增强了代码的模块化和可维护性。

函数式 Mixins 的关键方面：

• 带参数的 Mixins： Mixins 可以接受参数（arguments），从而实现动态灵活的样式生成。您还可以为参数提供默认值（default values）。
• 作用域（Scope）和‘返回值’： 默认情况下，Mixins 中定义的变量是该 Mixin 的局部变量。但是，当调用 Mixin 时，其属性会被复制到调用者的作用域中。如果一个 Mixin 定义了变量，这些变量也会在 Mixin 的属性之后在调用者的作用域中可用，这实际上允许 Mixins ‘返回’或设置值。
• 嵌套 Mixins： Mixins 可以在其他 Mixins 中定义和调用，从而实现复杂且有组织的样式结构。
• @arguments 变量： 在 Mixin 内部，特殊变量 @arguments 保存了传递给该 Mixin 的所有参数，这对于创建接受可变数量参数的 Mixins 非常有用。

示例：创建一个灵活的边框工具类

考虑使用一个 Mixin 来创建常用的边框样式：

.bordered(@width: 1px; @style: solid; @color: #ccc) {
  border: @width @style @color;
}

.element-one {
  .bordered(); // Uses all default values
}

.element-two {
  .bordered(2px; dashed; blue);
}

.element-three {
  .bordered(@color: red, @width: 3px); // Using named arguments
}

// Mixin 设置变量的示例（有效的‘返回值’）
.get-theme-colors(@theme-name) {
  @primary-color: if((@theme-name = dark), #333, #f0f0f0);
  @secondary-color: if((@theme-name = dark), #555, #ddd);
}

.dark-theme {
  .get-theme-colors(dark);
  background-color: @primary-color;
  color: @secondary-color;
}

编译后的 CSS (概念性输出)：

.element-one {
  border: 1px solid #ccc;
}

.element-two {
  border: 2px dashed blue;
}

.element-three {
  border: 3px solid red;
}

.dark-theme {
  /* 来自 .get-theme-colors 的属性不会直接输出，*/
  /* 但 @primary-color 和 @secondary-color 在其作用域中被设置 */
  background-color: #333;
  color: #555;
}

实际应用：

• 为常见模式创建工具类（utility classes）（例如，Flexbox 布局、间距）。
• 通过传递颜色或尺寸参数生成主题化组件（themed components）。
• 将复杂的 CSS 属性集（CSS property sets）抽象为简单、可重用的调用。

进一步学习：

查阅 LESS 官方文档，深入了解带参数 Mixins（parametric mixins）和 @arguments 变量，掌握更高级的技术。