Less - 命名空间与访问器

LESS - 使用命名空间和访问器组织代码

随着 LESS 项目的规模和复杂性增加，管理混合宏和变量变得至关重要。命名空间提供了一种将相关的混合宏和变量组归到同一个标识符下的方式，从而防止命名冲突并改进代码组织。访问器是用于调用这些命名空间成员的语法。

LESS 中的命名空间是什么？

将命名空间视为 LESS 代码的容器或模块。它们帮助您：

**封装逻辑：**将相关的实用工具和样式分组在一起。
**防止命名冲突：**如果您使用两个不同的库都定义了一个名为 .border-radius() 的混合宏，命名空间允许您区分它们（例如，#lib1 > .border-radius() 与 #lib2 > .border-radius()）。
**提高可读性和可维护性：**更容易找到和理解特定功能的片段。

定义命名空间

LESS 中的命名空间通常使用 ID 选择器（#）或类选择器（.）定义，如果它们仅用作混合宏/变量容器且不应自身输出 CSS，则后面跟着圆括号 ()。您也可以嵌套命名空间。

定义命名空间的示例：

// 通用实用混合宏的命名空间
#utils() {
  .clearfix() {
    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }

  .truncate-text() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @default-padding: 10px;
}

// 另一个命名空间，可能是特定组件的辅助工具
.my-component-helpers() {
  .border(@color: #ccc) {
    border: 1px solid @color;
  }
}

访问成员（混合宏和变量）

要使用命名空间中的混合宏或变量，您可以使用子组合器（>）或后代组合器（空格）。

语法：

#namespace > .mixin-name();
.namespace .mixin-name();（使用空格）
要访问变量：定义在带 () 的命名空间内的变量是该命名空间的局部变量。要在外部使用它们，您通常需要创建一个 ‘getter’ 混合宏，或者如果命名空间是一个简单的规则集（不是带 () 的混合宏捆绑包），则直接引用它们。

访问命名空间成员的示例：

.article-body {
  #utils > .clearfix(); // 调用 #utils 中的 clearfix 混合宏
  padding: #utils[@default-padding]; // 访问变量（使用类似 map 的语法用于捆绑包）
                                    // 更常见的是通过 getter 混合宏或当命名空间不是 () 捆绑包时访问变量
}

.widget {
  .my-component-helpers .border(blue); // 调用 .my-component-helpers 中的 border 混合宏
}

原始教程使用了嵌套类结构，这也有效地创建了命名空间：

// LESS 代码 (style.less)
.my-namespace {
  .sub-group {
    .make-bold(@weight: bold) {
      font-weight: @weight;
      color: navy;
    }
  }
}

.important-text {
  .my-namespace > .sub-group > .make-bold(900);
}

这会编译为：

/* CSS 输出 (style.css) */
.important-text {
  font-weight: 900;
  color: navy;
}

在这种情况下，.my-namespace 和 .sub-group 作为组织层级。混合宏 .make-bold() 是通过路径 > .my-namespace > .sub-group > .make-bold() 调用。请注意，如果 .my-namespace 或 .sub-group 仅作为容器而非自身输出 CSS，则应使用圆括号定义：.my-namespace() { ... }。

实际示例：HTML 和输出

考虑以下 HTML：

<!DOCTYPE html>
<html>
<head>
  <title>LESS Namespaces Example</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>Example using Namespaces</h1>
  <p class="important-text">
    LESS enables customizable, manageable, and reusable style sheets for web sites.
  </p>
  <div class="article-body">
    This text is inside an article body that should be clearfixed and have default padding.
  </div>
</body>
</html>

使用上面带有 .my-namespace > .sub-group > .make-bold(900); 的 style.less 示例，并假设 style.css 是编译后的输出：

输出描述：

在浏览器中，带有类 important-text 的段落将显示为字重 900（非常粗）的字体，颜色为海军蓝。这演示了嵌套混合宏如何通过其命名空间路径成功调用。

使用命名空间的好处：

**模块化：**有助于将大型 LESS 文件分解为更小、更易管理和更具逻辑性的单元。
**可重用性：**定义良好的包含实用混合宏的命名空间可以轻松导入并在不同项目之间重用。
**清晰性：**清楚地表明特定样式或实用工具的来源，尤其是在团队环境或使用第三方 LESS 库时。

有关更高级的命名空间用法，包括在命名空间上使用守卫（guards），请参考LESS 官方关于命名空间的文档。