Less - 混合

LESS - 混合（Mixins）

Less 中的混合（Mixins）是编写可维护和 DRY（不要重复自己）样式表的一个基石特性。它们允许你将一个规则集（即混合）中的 CSS 属性集合嵌入到另一个规则集中。可以将它们视为可复用的样式“CSS 片段”或“函数”。通常，你使用类或 ID 选择器定义一个混合，然后在另一个规则集中“调用”它来继承其样式。

Less 混合的关键方面：

• 基本用法： 只需包含你想要混合的规则集的选择器即可。例如，如果你有 .my-styles { color: blue; }，你可以在另一个类中这样使用它：.another-class { .my-styles; }。
• 从 CSS 输出中隐藏混合（使用括号）： 如果你在混合名称后使用括号 () 定义一个混合（例如，.utility-mixin() { ... }），那么这个混合本身将不会作为 CSS 规则输出。它只会在被其他规则集调用时使用。这对于创建不打算作为独立样式的工具混合非常理想。
• 带选择器的混合： 混合不仅可以包含属性，还可以包含嵌套选择器。混合时，这些选择器也会包含进来，它们相对于调用混合的选择器。
• 命名空间： 为了避免命名冲突并更好地组织你的混合，你可以使用 ID 选择器将它们分组到一个命名空间下（例如，#utils > .clearfix() {}）。然后你可以像 #utils > .clearfix(); 这样调用它。
• !important 关键字： 你可以在混合调用中添加 !important（例如，.my-mixin() !important;）。这将把 !important 应用到从该混合继承的每个属性上，有效地覆盖其他样式。

示例

让我们看一个在 LESS 文件中演示混合的实际示例。

假设你有以下 HTML 结构：

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 Mixins Example</title>
</head>
<body>
    <h1>Welcome to Modern Web Styling!</h1>
    <p class="important-message">This message uses a base style and an important highlight.</p>
    <p class="info-message">This message just uses the base style.</p>
    <p class="custom-alert">This alert uses the base style with a custom background.</p>
</body>
</html>

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

style.less

// 基本文本样式混合（由于使用了 '()'，本身不会被直接输出）
.base-text-style() {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

// 一个可见的样式，也可以用作混合
.highlight-text {
  color: red;
  font-weight: bold;
}

.important-message {
  .base-text-style(); // 使用工具混合
  .highlight-text;     // 将 .highlight-text 类用作混合
  padding: 10px;
  border: 1px solid red;
}

.info-message {
  .base-text-style();
  padding: 8px;
  background-color: #f0f0f0;
}

.custom-alert {
  .base-text-style(); // 显式使用括号调用
  background-color: #FFEEBA; // 淡黄色
  color: #856404;
  padding: 12px;
  border: 1px solid #FFDF7E;
}

要将 style.less 编译为 style.css，请使用 Less 编译器命令：

lessc style.less style.css

执行此命令将生成包含以下内容的 style.css 文件：

style.css (编译输出)

.highlight-text {
  color: red;
  font-weight: bold;
}
.important-message {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: red;
  font-weight: bold;
  padding: 10px;
  border: 1px solid red;
}
.info-message {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px;
  background-color: #f0f0f0;
}
.custom-alert {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: #FFEEBA;
  color: #856404;
  padding: 12px;
  border: 1px solid #FFDF7E;
}

输出解释

当你在浏览器中打开 index.html 时：

• .important-message 段落将继承 .base-text-style()（字体、大小、行高）和 .highlight-text（红色、粗体）的样式，以及它自身的内边距和边框。
• .info-message 段落将只继承 .base-text-style() 的样式，并拥有自身的内边距和背景。
• .custom-alert 段落也继承自 .base-text-style()，并拥有其特定的背景、颜色、内边距和边框。
• 注意，.base-text-style() 本身并未在最终的 CSS 中作为类出现，因为它在定义时使用了括号。然而，.highlight-text 出现了，因为它在定义时没有使用括号。

当 调用 同时也是一个 CSS 类的混合（如 .highlight-text）时，括号 () 是可选的。.highlight-text; 和 .highlight-text(); 都能产生包含其样式的相同结果。然而，对于定义一个 不应该 被输出（一个工具混合）的混合，括号在其定义中是强制性的（例如，.base-text-style() { … }）。