Less - 向混合传递规则集

LESS - 将规则集传递给 Mixins（分离式规则集）

描述

Less 提供了一个名为“分离式规则集”（Detached Rulesets）的强大概念。这允许你定义一个 CSS 规则块——包括属性（properties）、嵌套选择器（nested selectors）、变量声明（variable declarations），甚至其他 Mixin 调用（mixin calls）——并将整个块存储在一个变量中。然后，你可以像调用 Mixin 一样“调用”这个变量，从而有效地将其内容注入到另一个规则集（ruleset）中。分离式规则集对于高级主题定制（advanced theming）、创建高度可配置的组件（highly configurable components）或将复杂的样式配置作为一个单一单元（single unit）进行传递特别有用。

示例

以下示例演示了如何在 LESS 文件中定义和使用分离式规则集。该示例展示了一个分离式规则集，它自身包含一个 Mixin 定义，然后该 Mixin 被使用。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>LESS Detached Rulesets</title>
</head>
<body>
    <div class="content-container">
        <h2>Welcome to Advanced Less!</h2>
        <p>This section is styled using a detached ruleset.</p>
    </div>
</body>
</html>

接下来，创建 style.less 文件。

style.less

// 定义一个分离式规则集并将其存储在 @theme-styles 变量中。
// 这个分离式规则集自身包含一个 Mixin 定义。
@theme-styles: {
    // 这个 .apply-styling mixin 定义在分离式规则集*内部*。
    .apply-styling() {
        font-family: Verdana, sans-serif; // 使用一个更常见的字体
        background-color: #E0F7FA; // 淡青色背景
        border: 1px solid #00796B;
        padding: 15px;
    }
    // 你也可以在这里定义变量或其他规则。
    @internal-variable: #004D40; // 示例内部变量
};

.content-container {
    // 首先，'调用'或'解锁'分离式规则集本身。
    // 这会使得 @theme-styles 内部的所有内容（如 .apply-styling 和 @internal-variable）
    // 在当前作用域 (.content-container) 内可用。
    @theme-styles();

    // 现在，调用定义在 @theme-styles 内部的 .apply-styling() mixin。
    .apply-styling();

    // 你也可以使用定义在分离式规则集内的变量：
    color: @internal-variable; // 这将使用 #004D40
}

要将 style.less 编译成 style.css，使用以下命令：

lessc style.less style.css

这个命令会生成 style.css 文件：

style.css (编译输出)

.content-container {
  font-family: Verdana, sans-serif;
  background-color: #E0F7FA;
  border: 1px solid #00796B;
  padding: 15px;
  color: #004D40;
}

输出解释

当在浏览器中查看 index.html 时：

类为 .content-container 的 div 将应用在 .apply-styling() mixin 中定义的样式（字体、背景色、边框、内边距）以及来自 @internal-variable 的文本颜色。
这演示了分离式规则集如何封装一组样式和行为，使其以结构化的方式可移植和可重用。

分离式规则集的作用域

理解作用域在使用分离式规则集时至关重要：

**定义作用域 vs. 调用者作用域：**一个分离式规则集在自己的作用域（‘声明作用域’）中定义。当你’调用’或’解锁’一个分离式规则集（例如，@theme-styles();）时，其内容（变量、mixin）在其被调用的作用域（‘调用者作用域’）中变得可用。
**优先级：**如果声明作用域（分离式规则集内部）和调用者作用域都包含同名变量或 mixin，则声明作用域中的名称通常在解析分离式规则集内部的名称时享有优先权。然而，应用分离式规则集时，它在调用者的作用域环境中运行，如果在内部未找到，可以访问调用者作用域中的变量。
**引用不改变作用域：**如果你将一个分离式规则集变量赋值给另一个（例如，@another-set: @theme-styles;），这只是一个引用。@another-set 没有获得新的作用域；它仍然指向具有其原始声明作用域的原始分离式规则集。
**‘解锁’与作用域访问：**通过带括号调用 (‘解锁’) 分离式规则集（@ruleset()），它有效地将其样式合并到当前作用域，并且如果在分离式规则集内部未定义，可以访问这个调用作用域中的变量和 mixin。这允许根据使用分离式规则集的上下文进行动态样式设置。

分离式规则集提供了一种管理复杂样式集合并有条件地或动态地应用它们的复杂方式，是 Less 预处理能力的强大组成部分。