Less - 带参数的混合

LESS - 参数化 Mixin

描述

参数化 mixin 是 LESS 的基石之一，它允许你创建可重用的 CSS 规则块，这些规则块可以接受参数。这使得你可以在每次调用 mixin 时自定义其输出，显著提高了代码的重用性并减少了冗余（遵循 DRY 原则：Don’t Repeat Yourself）。

可以将参数化 mixin 想象成编程语言中的函数；它们接收输入并根据这些输入生成 CSS 声明。

基本语法：

.mixin-name(@param1; @param2: defaultValue; @param3...) {
  // 使用 @param1, @param2, @param3 的 CSS 规则
  property: @param1;
  another-property: @param2;
}

// 调用 mixin
.selector {
  .mixin-name(value1);
}

在这种语法中：

• 参数在括号内声明，用分号（;）或逗号（,）分隔。
• 可以为参数提供默认值（例如，@param2: defaultValue）。
• ... 语法可用于接受可变数量的参数（参见下面的 @rest 变量）。

参数化 Mixin 的主要特性：

特性编号	类型与描述	示例（概念性 LESS 及输出）
1	多个参数 Mixin 可以接受多个参数。你可以使用分号（;）或逗号（,）来分隔参数。虽然两者都可以，但建议在项目内保持一致性。通常更倾向于使用分号，因为在某些上下文中，逗号可能与 CSS 列表语法产生歧义。	.border-radius(@radius) { ... } .box-shadow(@x; @y; @blur; @color) { ... }
2	默认参数值 你可以为参数指定默认值。如果调用 mixin 时没有为某个参数提供值，则使用其默认值。	.button-style(@bg-color: blue; @text-color: white) {<br> background-color: @bg-color;<br> color: @text-color;<br>}<br>.my-button {<br> .button-style(); // 使用默认的蓝色背景、白色文本<br>}<br>.alert-button {<br> .button-style(@bg-color: red);<br>}
3	命名参数 调用 mixin 时，你可以通过名称而不是位置来提供参数。这提高了可读性，特别是对于参数多或有多个可选参数的 mixin。	.padding(@top: 10px; @right: 20px; @bottom: 10px; @left: 20px) { ... }<br>.element {<br> .padding(@left: 5px; @top: 15px);<br>}
4	@arguments 变量 在 mixin 内部，特殊变量 @arguments 包含传递给 mixin 的所有参数，包括那些有默认值但未被覆盖的参数。这对于将所有参数传递给另一个 mixin 或进行通用处理非常有用。	.wrapper-mixin(...) {<br> // 这里的 @arguments 将是传递给 wrapper-mixin 的所有参数<br> .inner-mixin(@arguments);<br>}
5	@rest... 变量（可变参数 Mixin） 通过在参数名（习惯上是 @rest... 或 @args...）后使用 ...，mixin 可以接受可变数量的参数。这些参数将作为空格分隔的列表存储在该变量中。	.flexible-box(@flex-grow: 1; @rest...) {<br> flex-grow: @flex-grow;<br> // @rest 可能包含 flex-shrink, flex-basis 值<br> flex: @flex-grow @rest;<br>}<br>.item {<br> .flexible-box(1; 0; auto); // @rest 变为 0 auto<br>}
6	模式匹配与守卫 (Guards) LESS 允许你定义多个同名但具有不同参数签名或守卫条件的 mixin。LESS 然后会根据传入的参数或满足的条件来选择应用哪个 mixin。这对于创建条件逻辑非常强大。	.triangle(up; @size: 5px; @color: black) { /* styles for up arrow */ }<br>.triangle(down; @size: 5px; @color: black) { /* styles for down arrow */ }<br><br>.my-arrow {<br> .triangle(up; 10px; blue);<br>}

实际应用示例：创建一个 Border Mixin

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

.header {
  // 使用所有默认值
  .custom-border();
}

.content-box {
  // 覆盖部分值
  .custom-border(2px; @color: blue); // 使用默认的 style 'solid'
}

.footer {
  // 提供所有值
  .custom-border(1px; dashed; green);
}

这个 mixin 提供了一种灵活的方式来应用边框，并带有合理的默认值，使得你的样式表更整洁、更易于维护。