Less - 扩展

LESS - 使用 Extend 进行选择器继承

LESS 中的 extend 特性是一种强大的方法，可以在选择器之间共享 CSS 属性，而无需在 HTML 或 CSS 中重复代码。它是一个伪类 (pseudo-class)，将扩展选择器与被扩展选择器合并，在编译后的 CSS 中生成一个逗号分隔的选择器列表，共享同一个样式块。这与 mixins 不同，mixins 是将属性复制到调用选择器中。

基本示例

考虑以下 HTML 和 LESS 代码：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>LESS Extend Example</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div class="alert basic-alert">
        <p>This is a basic alert.</p>
    </div>
    <div class="alert warning-alert">
        <h2>Warning!</h2>
        <p>This is a warning alert, extending basic alert styles.</p>
    </div>
</body>
</html>

style.less:

.basic-alert {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
}

.warning-alert {
    &:extend(.basic-alert); // Extends all styles from .basic-alert
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;

    h2 {
        margin-top: 0;
        color: inherit; // Inherits color from .warning-alert
    }
}

使用以下命令编译 style.less 到 style.css： lessc style.less style.css

编译后的 style.css:

.basic-alert,
.warning-alert {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
}
.warning-alert {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}
.warning-alert h2 {
  margin-top: 0;
  color: inherit;
}

在此示例中，.warning-alert 继承了 .basic-alert 的所有属性。编译后的 CSS 将 .basic-alert 和 .warning-alert 分组以共享样式，使 CSS 更符合 DRY (Don’t Repeat Yourself) 原则。

Extend 语法选项

Extend 可以通过多种方式使用：

序号	语法类型与描述
1	Extend 附着在选择器上 selector:extend(targetSelector) { /* styles */ } 将 extend 附着到选择器本身。当扩展选择器也有其独特的属性时很有用。
2	Extend 在规则集内部 selector { &:extend(targetSelector); /* other styles */ } 这是最常见的语法，将 &:extend() 放在规则集 (ruleset) 内部。
3	扩展多个选择器 selector { &:extend(target1, target2); } 一个选择器可以同时扩展多个目标选择器。
4	扩展嵌套选择器 .parent .child { &:extend(.base .item); } Extend 可以针对嵌套选择器。除非使用 extend all，否则被扩展的选择器必须完全匹配。
5	Extend 的精确匹配 默认情况下，extend 寻找与被扩展选择器的精确匹配。例如，a.class 不会匹配 .class，除非使用 all 关键字。
6	Extend “all” 关键字 selector:extend(target all) { } 或 selector { &:extend(target all); } 当使用关键字 all 时，LESS 会扩展目标选择器的所有出现之处，即使它是复合选择器（例如 .target.another-class 或 ul .target）的一部分。
7	Extend 的选择器插值 Extend 可以与插值选择器一起使用：@my-selector: .error; .critical { &:extend(@{my-selector}); }。
8	作用域和 @media 指令 Extend 通常只匹配同一 @media 块内的选择器。在媒体查询外部的 extend 将匹配基础作用域 (base scope) 中的选择器。由于 CSS 特异性 (specificity) 规则，通常无法跨媒体查询进行扩展，也不建议这样做。
9	重复检测 LESS 试图避免生成冗余的 CSS。extend 通过分组选择器而非重复属性来提供帮助。

Extend 的使用场景

序号	使用场景与描述
1	语义化类分组 使用 extend 对共享一组基础样式的选择器进行分组，从而允许更语义化的 HTML，而无需添加大量工具类。这是主要的使用场景。
2	减小 CSS 输出大小 通过分组共享样式的选择器，extend 有助于减小编译后 CSS 文件的总体大小，与为此目的使用 mixins（这将重复属性）相比。
3	创建样式变体 通过扩展基础样式，然后覆盖或添加特定属性，轻松创建基础组件（如 alert、button）的变体。

何时使用 Extend 与 Mixins：

• 当你想建立一个“是一种”(is-a) 关系（例如，.warning-alert 是一种 .alert）并希望在你的 CSS 中分组选择器时，使用 extend。
• 当你想在选择器中包含一组属性而不创建选择器之间的关系时，或者当你需要传递参数来定制包含的样式时，使用 mixins。

理解 extend 是编写高效且可维护 LESS 代码的关键。对于高级场景和边缘情况，请查阅官方 LESS 文档。