Less - 变量

LESS - 变量：可复用样式的基石

变量是 LESS 的一个基石特性，它允许你定义可在整个样式表中应用的复用值。这能提升一致性、简化维护，并且是创建主题或可配置设计系统的基础。

LESS 中的变量是什么？

在 LESS 中，变量以 @ 符号开头，后跟一个名称，使用冒号 (:) 来赋值。

@primary-color: #337ab7;
@base-font-size: 16px;
@default-padding: 1em;
@site-font-stack: Helvetica, Arial, sans-serif;

定义后，你可以在 LESS 文件中任何需要值的地方使用这些变量。

body {
  font-family: @site-font-stack;
  font-size: @base-font-size;
  color: darken(@primary-color, 20%);
}

.button-primary {
  background-color: @primary-color;
  padding: @default-padding;
  color: white;
}

变量插值

变量还可以通过插值用在选择器名称、属性名称、URL 以及 @import 语句中。插值的语法是 @{variable-name}。

选择器名称：

@my-selector-prefix: "widget";

.@{my-selector-prefix}-box {
  border: 1px solid #ccc;
}
// 编译结果为: .widget-box { border: 1px solid #ccc; }

属性名称（不常用）：

@border-style-prop: "border-style";
@border-value: "dotted";

.element {
  @{border-style-prop}: @border-value;
}
// 编译结果为: .element { border-style: dotted; }

URL：

@image-path: "/assets/images";

.icon {
  background-image: url("@{image-path}/icon.png");
}
// 编译结果为: .icon { background-image: url("/assets/images/icon.png"); }

`@import` 语句：

@theme-name: "dark";

@import "themes/@{theme-name}-theme.less";
// 尝试导入名为 "themes/dark-theme.less" 的文件

变量作用域

LESS 变量拥有词法（或静态）作用域，类似于 JavaScript。变量首先会在当前本地作用域中查找。如果找不到，LESS 会沿作用域链向上查找，直到找到该变量或到达全局作用域。

@global-var: red;

.section {
  @local-var: blue;
  color: @local-var;   // 使用 blue
  border-color: @global-var; // 使用 red

  .subsection {
    @local-var: green; // 遮蔽了 .section 的 @local-var
    background-color: @local-var; // 使用 green
    border-top-color: @global-var; // 仍然使用全局作用域的 red
  }

  // 在 .subsection 之后，@local-var 在 .section 内仍然是 blue
  padding-left-color: @local-var; // 使用 blue
}

延迟求值（“最后声明者获胜”规则）

LESS 对变量采用延迟求值。这意味着变量直到在属性或混合中实际使用时才被赋予其最终值。如果在同一作用域或导入的作用域中多次定义一个变量，那么 在其使用之前遇到的最后一个定义 将生效。这对于 LESS 如何处理默认值和覆盖至关重要。

示例 1：简单覆盖

@color: black;
@color: orange; // 这是在 .my-element 之前遇到的最后一个定义

.my-element {
  color: @color; // 编译结果为 color: orange;
}

@color: blue; // 这个定义太晚，不会影响 .my-element

示例 2：覆盖库的默认值

// ---- library-defaults.less ----
@button-bg: #007bff; // 库的默认按钮背景
@button-padding: 0.5em 1em;

// ---- my-theme.less ----
@button-bg: #5cb85c; // 我的主题覆盖了按钮背景

// ---- main.less ----
@import "library-defaults.less"; // 定义初始默认值
@import "my-theme.less";       // 覆盖 @button-bg

.button {
  background-color: @button-bg;     // 使用 #5cb85c (来自 my-theme.less)
  padding: @button-padding;         // 使用 0.5em 1em (来自 library-defaults.less)
}

在此场景中，来自 my-theme.less 的 @button-bg 是在 .button 使用它之前遇到的最后一个定义，因此它具有优先权。这允许你在库中定义默认变量，并通过在你项目特定的文件中导入你的覆盖文件来实现轻松覆盖，这些覆盖文件应该在导入库的默认文件之后但在使用这些变量的规则完全处理之前。

变量运算

LESS 中的变量可以存储各种数据类型，包括数字（带或不带单位）、字符串、颜色和列表。你可以对它们执行运算：

算术运算： @base-width: 100px; @sidebar-width: @base-width / 3;
颜色函数： @alert-color: #ff0000; @darker-alert: darken(@alert-color, 20%);
字符串拼接：（通常通过插值处理）

实际应用场景

主题化： 定义一组用于颜色、字体、间距等的变量，以便轻松切换主题或保持品牌一致性。
网格系统： 使用变量定义列数、间距宽度和容器大小。
响应式断点： 将媒体查询断点存储在变量中以便一致使用：@screen-md: 768px;。
避免魔法数字/字符串： 用命名变量替换硬编码的值，以提高可读性并简化更新。

变量是编写 DRY（不要重复自己）、可维护且灵活的 LESS 代码的基础。有关更多详细信息，请参阅官方 LESS 变量文档。