一、简介

LESS 变量用于存储可复用的值（如颜色、尺寸、字体等），通过变量名引用这些值，实现样式的集中管理和全局修改。其核心优势：

• 提升维护性：修改变量值即可全局生效。
• 增强可读性：语义化变量名让代码更易理解。
• 动态计算：支持数学运算和函数处理。

二、语法

1、定义变量

值可以是颜色、数值、字符串、布尔值、URL、List、Map 等。

@变量名: 值;

示例：

@primary-color: #3498db; // 颜色
@base-font-size: 16px; // 尺寸
@font-family: "Arial"; // 字符串

2、使用变量

.selector {
  属性: @变量名;
}

示例：

.button {
  color: @primary-color;
  font-size: @base-font-size;
}

三、核心用法

1、作用域

支持块状作用域，允许局部变量覆盖全局变量：

@color: red;
.header {
  @color: blue; // 局部变量
  color: @color; // blue
}

编译后：

.header {
  color: blue;
}

2、插值语法

将变量嵌入选择器名、属性名或 URL：

@component: "alert";
@image-path: "../assets";

.@{component}-box {
  // 生成 .alert-box
  background: url("@{image-path}/bg.png");
}

编译后：

.alert-box {
  background: url("../assets/bg.png");
}

3、动态计算

支持数值运算和单位转换：

@base: 10px;
.box {
  padding: @base * 2; // 20px
  width: calc(100% - @base); // 90%
}

四、示例

1、基础示例

@primary-color: #3498db;
@padding: 20px;

.button {
  color: @primary-color;
  padding: @padding;
  &:hover {
    background: lighten(@primary-color, 10%);
  }
}

编译后：

.button {
  color: #3498db;
  padding: 20px;
}
.button:hover {
  background: #5dade2;
}

2、高级示例：循环生成类名

// 生成 .col-1 到 .col-3 的宽度类
.generate-columns(@n, @i: 1) when (@i <= @n) {
  .col-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
.generate-columns(3);

编译后：

.col-1 {
  width: 33.3333%;
}
.col-2 {
  width: 66.6666%;
}
.col-3 {
  width: 100%;
}

3、响应式断点管理

@breakpoint-tablet: 768px;

@media (min-width: @breakpoint-tablet) {
  .container {
    max-width: @breakpoint-tablet;
  }
}

编译后：

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

五、最佳实践

1. 命名规范：使用语义化名称（如 @primary-color）。
2. 模块化：将变量集中管理在 _variables.less 文件中。
3. 避免过度嵌套：嵌套层级不超过 3 层。

通过变量，LESS 让 CSS 开发更高效、灵活，尤其适合中大型项目或需要动态样式的场景。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24