FORMA

Less 基础与核心语法

Less 是 CSS 预处理器：在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载。不能在页面中直接引用未编译的 .less（生产环境应使用构建产物）。工程化集成（Vite/Webpack/Vue CLI 全局变量注入、URL 重写）见 工程化集成与扩展。

一、基础概念

1. 与 CSS 的关系

任意合法的 CSS 文件可作为 Less 文件编译（扩展名改为 .less 即可），便于渐进迁移：已有的 CSS 项目可以先原样改名为 .less，再逐步引入变量、嵌套等特性，无需一次性重写。

2. 工作原理

text
.less 源文件 → lessc 或 less-loader 编译 → .css → HTML 引用

开发时可用 less.js 在浏览器端实时编译，仅适合演示；生产环境应在构建阶段编译为静态 .css，避免运行时编译带来的性能与兼容性问题。

3. 安装

bash
npm install -D less
npx lessc -v

全局安装（可选）：

bash
npm install -g less

4. 命令行编译

命令说明
lessc styles.less styles.css基本编译
lessc styles.less styles.css --compress压缩（旧版选项，以当前 less 文档为准）
lessc styles.less styles.css --source-map生成 Source map
lessc --rewrite-urls=all styles.less styles.css重写 url() 相对路径，见 工程化集成

5. 在构建工具中使用

工具说明
Vitenpm i -D less 后可直接导入 .less，无需额外配置
Webpackless-loader + css-loader（+ style-loader 或 MiniCssExtractPlugin）
Vue CLI创建时选 Less，或在现有项目安装 less + less-loader

更完整的全局变量注入、URL 重写等工程化配置见 工程化集成与扩展。

二、核心语法

1. 变量（Variables）

Less 变量以 @ 开头，可存储颜色、尺寸、字体等任意 CSS 值。

less
@primary-color: #4d926f;
@base-font-size: 16px;

#header {
  color: @primary-color;
  font-size: @base-font-size;
}

插值语法：在选择器名、属性名、字符串等“非值”场景使用 @{变量名} 形式。

less
@my-selector: banner;
@side: left;
@image-path: "./assets";

.@{my-selector} {
  font-weight: bold;
}
.card {
  margin-@{side}: 20px;
  background: url("@{image-path}/logo.png");
}

2. 嵌套（Nesting）

通过嵌套直观表达 HTML 结构的层级关系，避免重复书写父选择器。

less
.parent {
  color: #333;
  .child {
    margin-top: 10px;
    &:hover {
      // & 引用父选择器 .parent .child
      color: red;
    }
  }
}

父选择器 &：在嵌套中使用 & 代表完整的父选择器序列，常用于伪类、伪元素或生成新的类名。

媒体查询嵌套：可将 @media 直接写在选择器内部，使响应式逻辑与组件样式保持在一起。

less
.component {
  width: 600px;
  @media (max-width: 768px) {
    width: 100%;
  }
}

3. 混合（Mixins）

混合（Mixin）允许将一个规则集中的属性“混入”另一个规则集，实现样式复用。

无参混合：

less
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered(); // 引用 .bordered 中的样式
}

带参混合（可设置默认值）：

less
.border-radius(@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  .border-radius(10px); // 传入参数 10px
}
.footer {
  .border-radius(); // 使用默认值 5px
}

模式匹配（根据参数个数或名称执行不同版本）：

less
.mixin(dark, @color) {
  color: darken(@color, 10%);
}
.mixin(light, @color) {
  color: lighten(@color, 10%);
}
.button {
  .mixin(dark, #333);
}

4. 运算（Operations）

支持数值、颜色、变量的加减乘除运算。

less
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%

.box {
  width: (100% / 6); // 除法需用括号
  margin: (10px + 5px);
}

颜色运算：对颜色值进行运算时，Less 会将其转换为 RGB 通道分别计算。

less
@primary-color: #111;
@darker-color: @primary-color + #111; // 结果为 #222

注意：除法运算必须用括号包裹，如 (100% / 6)，否则 Less 不会将其视为除法。

5. 函数（Functions）

Less 内置了丰富的函数，涵盖颜色、数学、字符串、类型判断等。

类别函数示例说明
颜色操作lighten(@color, 20%)、saturate(@color, 20%)调整亮度和饱和度
类型判断iscolor(@color)、isnumber(@size)判断值类型
数学函数ceil(2.1) → 3、floor(2.9) → 2、percentage(0.2) → 20%数值处理
字符串函数escape("a=1")、replace("Hello", "el", "a")字符串操作
列表函数length(1px 2px 3px) → 3、extract(10px 20px, 2) → 20px列表处理

条件逻辑：Less 没有 if/else，但可以通过 when 关键字在混合中实现条件分支。

less
.mixin(@size) when (@size > 100) {
  width: @size;
}
.mixin(@size) when (@size <= 100) {
  width: @size * 2;
}

6. 作用域（Scope）

Less 变量采用“就近原则”：先从当前作用域查找，若找不到则向父级作用域查找。

less
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // 输出 white
  }
}

延迟加载（Lazy Loading）：在同一个作用域内，变量值由最后一次赋值决定，无论变量使用的位置在前还是在后。

less
.lazy-eval {
  width: @var; // 这里的 @var 最终是 9%
  @a: 9%;
}
@var: @a; // 后定义的生效
// 编译后 width 为 9%

7. 导入（Importing）

使用 @import 可以将其他 Less 或 CSS 文件合并到当前文件。

less
@import "variables"; // 自动补 .less 扩展名
@import "typo.css"; // 导入普通 CSS 文件

导入选项：在 @import 后添加修饰符控制导入行为。

选项作用
reference只使用导入文件中的变量和混合，不输出其样式（用于按需加载）
inline将文件原样复制到输出中，不处理其中的 Less 代码
less强制将文件当作 Less 处理（即使扩展名是 .css）
css强制将文件当作普通 CSS 处理（不进行 Less 编译）
less
@import (reference) "bootstrap.less";
@import (inline) "minify.css";

三、常见错误

现象处理
除法未生效，输出字面量用括号包裹表达式，如 (100% / 6)
变量“晚定义生效”导致取值不符预期检查同一作用域内是否有更靠后的重复赋值（延迟加载特性）
.less 未编译直接被浏览器请求生产环境需构建产物 .css，检查构建配置是否遗漏该入口
混合样式未按预期分支执行检查 when 条件与参数匹配的模式，注意参数个数/类型

总结

Less 以 @ 为变量标识，语法与 CSS 完全兼容，适合团队快速上手。其核心特性包括：

  • 变量：统一管理样式值，支持插值。
  • 嵌套：还原 HTML 结构，配合 & 引用父选择器。
  • 混合：复用样式块，支持参数、默认值和模式匹配。
  • 运算：数值和颜色计算，除法需括号。
  • 函数：内置颜色、数学、列表等函数，配合 when 实现条件逻辑。
  • 作用域：就近查找 + 延迟加载。
  • 导入：模块化组织代码，支持多种导入选项。

与 SCSS 对比见 CSS、Sass 与 Less；工程化集成见 工程化集成与扩展。

参考文献

资料说明
Less 官方文档变量、混合、函数、CLI
Less：Operations运算与括号规则
Less：在浏览器中使用less.js（了解即可，生产慎用）

相关文章

Series

less

1 / 2

工程化集成与扩展