前言：
在现代前端开发中，CSS 作为样式设计的核心语言，虽然功能强大，但随着项目规模的扩大，其局限性也日益明显：重复代码多、维护成本高、缺乏编程逻辑（如变量、函数、嵌套等）。这些问题使得开发者不得不花费大量时间在冗余的样式编写和后期调整上。
Less（Leaner Style Sheets） 作为一款流行的 CSS 预处理器，完美弥补了原生 CSS 的不足。它引入了变量、嵌套、混合（Mixins）、运算、函数等特性，让样式代码更加模块化、可维护，同时保持与 CSS 的完全兼容。无论是管理主题色、优化响应式布局，还是封装复用样式，Less 都能大幅提升开发效率。
本文将从 Less 的核心语法出发，结合实战案例，带你系统掌握 Less 的变量定义、嵌套规则、混合复用、编译流程等关键技能。无论你是刚接触预处理器的新手，还是希望优化工作流的中高级开发者，都能从中获得实用价值。让我们开始这段更高效、更优雅的样式开发之旅吧！ 🚀
为什么需要学习 Less
CSS 语言：
1.语法缺失（循环、判断、拼接）
2.功能缺失（颜色函数、数学函数、自定义函数） CSS 预处理是解决 CSS 语言的缺点的，在 CSS语言上扩展了很多东西，是一个包含关系，CSS 预处理包含 CSS ，CSS 有的 CSS 预处理都有。有了 CSS 预处理，但是浏览器只认识 CSS ，不认识这个新的语言，那就需要编译转换成 CSS 语言。
sass/less/stylus --> css 预编译器(预处理器) --> css 语言
1）什么是 less
- 定义：Less 是一种更加简洁的样式代码语言，类似与 CSS 但具有额外功能
- 特点：
-
- 完全兼容了 CSS ，可以直接使用 CSS 代码
- 添加了变量、嵌套等特性使样式编写更高效
- 需要通过编译转换为标准 CSS 才能在浏览器中使用
- 优势：
-
- 减少重复代码，提高开发效率
- 增强代码可维护性，如通过变量统一管理颜色值
- 嵌套语法使代码结构更清晰
Less 代码虽好，但无法被浏览器识别，因此需要一个工具将其转换为 CSS 代码，由于 node 环境具有读写文件的能力，于是在 node 环境中可以轻松的完成文件转换。
npm 上有一个包叫做 less ，它运行在 node 环境中，通过它可以完成对 Less 代码的转换
可以看出来， node 环境在前端工程化中，充当了一个辅助角色，它并不直接运行前端代码，而是让我们编写前端代码更加便利。
转换代码称之为编译(compile)，转换代码的工具称之为编译器(compiler)
2）体验 Less
& 符号是防止转换为 CSS 语言时有空格产生变成后代选择器
1. Less 核心语法
-
- 变量：使用@符号定义，如@green: #008c8c;
@width:10px;
@height:@width + 10px;
#header {
width:@width;
height:@height
}
编译为：
#header {
width:10px;
height:20px;
}
-
- 嵌套：支持选择器嵌套，使用 & 表示父选择器
#head { color: black;}
#head .navigation { font-size:12px;}
#head .logo {wodth:300px;}
用 Less 语言可以这样书写代码：
#head {
color:black;
.navigation {
font-size:12px;
}
.logo {
width:300px;
}
}
-
-
- 基本语法: 支持CSS选择器的层级嵌套，如：
- 特殊符号:
-
-
-
-
- &连接符: 表示当前选择器的父级，用于伪类/伪元素，如li { &:hover {...} }
-
子选择器: 表示直接子元素关系，如li > a {...}
-
-
-
- 混合：可重用样式块的机制
.roud(@r){
border-radius:@r;
}
.content-center(){
display:flex;
justify-content:center;
align-items:center;
}
.a {
.roud(5px);
}
.b {
.content-center();
}
-
-
- 定义方式:
-
-
-
-
- 基础混合：.rounded { border-radius: 5px; }
- 带参数混合：.rounded(@r: 5px) { border-radius: @r; }
- 隐藏混合：.rounded() { ... }（加括号不输出原始类）
-
-
-
-
- 调用方式: 直接在规则集中引入，如a { .rounded; }
- 典型应用:
-
-
-
-
- 样式复用: 如清除浮动、居中布局等通用样式
- 参数化样式: 如不同尺寸的圆角、阴影等
-
-
2. 编译和编译器
-
- 编译(compile): 将Less代码转换为CSS代码的过程
- 编译器(compiler): 执行编译的工具，如lessc
- 工作流程: 开发者编写Less → 编译器转换 → 浏览器使用CSS
3. 使用 npm 下载 less
less 包提供了一个 cil 工具 lessc
-
- 全局安装 less
这种方案可以在任何终端目录使用 lessc 命令，但不利于版本控制。
-
- 本地安装 less
这种方案会把 less 安装到工程目录的 node_modules 中无法全局使用 lessc 命令，但可以在当前工程目录中使用 npx lessc 运行命令。
npx 是 npm 提供的一个小工具，它可以运行当前项目中安装到 node_modules 的 cli 命令
如果配置 packeage.json 脚本，无须使用 npx ，比如 "c": "npx lessc -v",然后运行 npm run c
如果可以，应该尽量使用本地安装，而非全局安装
4. 使用 lessc 命令，对编写的 less 文件进行编译
- 将 index.less 编译成为 index.css
- lessc index.less index.css
5. 特殊注释：
-
- //单行注释不会编译到CSS
- /* */多行注释会输出到CSS
知识小结：
| 知识点 | 核心内容 | 考试重点/易混淆点 | 难度系数 |
|---|---|---|---|
| 工程化概念 | 工具集合解决复杂项目问题，对比简单项目(如轮播图)与复杂项目(如淘宝网)的区别 | 工程化必要性理解：简单项目无需工程化，复杂项目必须使用 | ⭐⭐ |
| Less基础 | CSS预处理器，支持变量、嵌套、混合等特性，完全兼容CSS语法 | 变量作用域：大括号内定义的变量外部不可用 | ⭐⭐ |
| 变量(Variables) | @color: #008c8c定义，避免重复值修改困难，编译后消失 | 变量命名规范：建议@前缀+语义化名称(如@primary-color) | ⭐ |
| 嵌套(Nesting) | 层级关系可视化，&符号处理伪类和并列选择器 | 嵌套过度问题：超过3层嵌套影响可维护性 | ⭐⭐ |
| 混合(Mixins) | 类似函数的代码复用机制，支持参数和默认值(如.center(@type:absolute)) | 无输出混合：加()避免生成多余CSS规则 | ⭐⭐⭐ |
| 编译原理 | Node环境文件读写能力实现代码转换，lessc命令执行编译 | 开发依赖：npm install -D less正确安装方式 | ⭐⭐⭐ |
| 工程化工具链 | Node作为辅助工具，不运行前端代码只进行文件转换 | npx作用：运行本地安装的CLI工具 | ⭐⭐⭐⭐ |
| 注释处理 | //单行注释不输出，/* */多行注释保留到编译结果 | 最佳实践：开发阶段使用单行注释 | ⭐ |
| 预处理器对比 | Less/Sass/Stylus等同类工具，语法差异但核心功能相似 | 选择建议：团队统一标准优先 | ⭐⭐ |
