Less 变量 #

变量是 Less 最基础也是最重要的特性之一。通过变量，你可以定义可复用的值，统一管理颜色、尺寸、字体等样式属性。

变量定义 #

Less 使用 @ 符号定义变量：

less

// 定义变量
@primary-color: #4d926f;
@base-font-size: 16px;
@header-height: 60px;

变量使用 #

基本使用 #

less

@primary-color: #4d926f;
@base-padding: 20px;

.container {
  color: @primary-color;
  padding: @base-padding;
}

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

编译结果：

css

.container {
  color: #4d926f;
  padding: 20px;
}
.button {
  background: #4d926f;
  padding: 20px;
}

作为属性值 #

less

@border-direction: border-top;

.box {
  @{border-direction}: 1px solid #ccc;
}

编译结果：

css

.box {
  border-top: 1px solid #ccc;
}

作为选择器 #

less

@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
}

编译结果：

css

.banner {
  font-weight: bold;
  line-height: 40px;
}

作为 URL 路径 #

less

@images: "../img";

body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

编译结果：

css

body {
  color: #444;
  background: url("../img/white-sand.png");
}

作为 @import 路径 #

less

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less";

变量插值 #

使用 @{变量名} 语法进行插值：

less

@prefix: ui;
@separator: -;

.@{prefix}@{separator}button {
  display: inline-block;
}

.@{prefix}@{separator}input {
  border: 1px solid #ccc;
}

编译结果：

css

.ui-button {
  display: inline-block;
}
.ui-input {
  border: 1px solid #ccc;
}

变量作用域 #

Less 变量具有作用域概念，遵循"就近原则"。

全局作用域 #

less

@color: red;

.page {
  color: @color; // red
}

局部作用域 #

less

@color: red;

.page {
  @color: blue;
  color: @color; // blue
  
  .content {
    color: @color; // blue（继承父作用域）
  }
}

作用域提升 #

Less 变量会被"提升"到作用域顶部：

less

.page {
  color: @color; // blue（不是 red！）
  
  @color: blue;
}

块级作用域示例 #

less

@var: global;

.outer {
  @var: outer;
  
  .inner {
    @var: inner;
    value: @var; // inner
  }
  
  value: @var; // outer
}

.value {
  value: @var; // global
}

变量覆盖 #

后定义的变量会覆盖先定义的变量：

less

@color: red;
@color: blue;

.box {
  color: @color; // blue
}

条件覆盖 #

less

@color: red;

.box {
  @color: blue;
  color: @color; // blue
}

.another {
  color: @color; // red（全局变量未被修改）
}

默认变量 #

使用变量覆盖特性实现默认值：

less

// 默认值
@base-color: #ccc;

// 用户自定义（可覆盖默认值）
@base-color: #4d926f;

.box {
  color: @base-color; // #4d926f
}

这种方式常用于主题定制：

less

// theme-default.less
@primary-color: #007bff;
@font-size-base: 14px;

// theme-custom.less
@primary-color: #4d926f; // 覆盖默认主题色

// styles.less
@import "theme-default.less";
@import "theme-custom.less";

.button {
  background: @primary-color; // #4d926f
}

变量延迟加载 #

Less 变量在使用时才会被解析：

less

.lazy-eval {
  width: @var;
}

@var: 100px;

编译结果：

css

.lazy-eval {
  width: 100px;
}

变量作为变量名 #

使用 @@ 语法实现变量名动态引用：

less

@fnord: "I am fnord.";
@var: "fnord";

.content {
  content: @@var; // 等同于 @fnord
}

编译结果：

css

.content {
  content: "I am fnord.";
}

变量类型 #

Less 变量可以存储不同类型的值：

颜色 #

less

@primary: #4d926f;
@secondary: rgb(77, 146, 111);
@tertiary: hsl(145, 31%, 44%);
@transparent: rgba(77, 146, 111, 0.5);

数值 #

less

@base-size: 16px;
@line-height: 1.5;
@columns: 12;
@spacing: 20;

字符串 #

less

@font-family: "Helvetica Neue", Arial, sans-serif;
@image-path: "../images";

列表 #

less

@colors: red, green, blue;
@border-style: 1px solid #ccc;

映射（Maps） #

less

@colors: {
  primary: #4d926f;
  secondary: #ccc;
  danger: #ff4757;
};

.button {
  background: @colors[primary];
}

CSS 变量 vs Less 变量 #

特性	Less 变量	CSS 变量
编译时机	预编译	运行时
浏览器兼容	完美	现代浏览器
动态修改	不支持	支持
作用域	编译时确定	DOM 树
性能	无运行时开销	轻微开销

结合使用 #

less

// Less 变量定义
@primary-color: #4d926f;

// 输出 CSS 变量
:root {
  --primary-color: @primary-color;
}

// 使用 CSS 变量实现动态主题
.button {
  background: var(--primary-color);
}

// 使用 Less 变量作为默认值
.card {
  background: @primary-color;
  background: var(--primary-color, @primary-color);
}

最佳实践 #

命名规范 #

less

// 推荐：语义化命名
@primary-color: #4d926f;
@font-size-base: 16px;
@spacing-sm: 8px;
@spacing-md: 16px;
@spacing-lg: 24px;

// 不推荐：具体值命名
@blue: #4d926f;
@size-16: 16px;

变量组织 #

less

// 颜色系统
@color-primary: #4d926f;
@color-secondary: #6c757d;
@color-success: #28a745;
@color-danger: #dc3545;
@color-warning: #ffc107;
@color-info: #17a2b8;

// 字体系统
@font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
@font-size-base: 16px;
@font-size-sm: 14px;
@font-size-lg: 18px;
@line-height-base: 1.5;

// 间距系统
@spacing-unit: 8px;
@spacing-xs: @spacing-unit * 0.5;  // 4px
@spacing-sm: @spacing-unit;         // 8px
@spacing-md: @spacing-unit * 2;     // 16px
@spacing-lg: @spacing-unit * 3;     // 24px

// 断点
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;

下一步 #

现在你已经掌握了变量的使用，接下来学习嵌套来组织你的样式结构！