Less（全称 Leaner Stylesheets，即精简样式表）本质上就是 CSS 的进化版，一个向后兼容的扩展工具。它把 CSS 开发带入了更高的维度——不只是在样式表上写规则，而是真正拥有了变量、计算、嵌套这些编程语言才有的能力。简单说，就是让你写 CSS 的效率和可维护性上一个大台阶。这篇文章会把 Less 的核心用法和配置逻辑，从头到尾讲清楚，帮助前端开发者快速上手这款常用的 CSS 预处理器。
安装
想跑起来 Less，前提是你的机器上已经装好了 Node.js 环境。然后在命令行里敲一行代码，全局安装就搞定了：
npm install less -g
装完之后，试试在终端运行 lessc -v。如果能顺利打出版本号，说明安装这一步已经完成了，你可以开始体验 Less 的编译与样式编写。
编译运行
在 VSCode 或者其他编辑器里新建一个以 .less 结尾的文件，然后往里面扔一段 Less 风格的代码，比如这样：
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
文件写好后，打开终端用 lessc 命令把它编译成标准的 .css 文件。格式就是：
lessc [option option=parameter ...]
举个例子，要把 index.less 变成 index.css，就这么写：
lessc index.less index.css
编译完成，一个可用的 CSS 文件就生成好了。具体看看下图会更直观：
基本用法
变量（Variables）
用 @ 符号来声明变量并直接使用，方便得很：
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译后输出：
#header {
width: 10px;
height: 20px;
}
混合（Mixins）
混合这个概念，说白了就是让你在一个规则集里直接引用另一个规则集的属性，实现样式的复用。比如你定义了一个类叫 .bordered：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
然后你希望在别的地方也用到这段样式，直接往里“混入”这个类的名字就行：
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
这样 .bordered 里的所有样式就自动被复制到了 #menu a 和 .post a 里面。另外，#ids 也能当作 mixin 来用，灵活度很高。
嵌套（Nesting）
嵌套可以说是 Less 最打动人心的功能之一——它允许你像写 HTML 结构一样去写 CSS，大幅提升代码可读性与组织性。原来需要这样一层层写：
#header {
color: black;
}
#header .na vigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
到了 Less 里，可以直接这么嵌套着写：
#header {
color: black;
.na vigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
这种写法不仅简洁，并且一眼就能看出层级关系，和 HTML 的结构天然对应，尤其适合维护复杂布局。
嵌套还能用来处理伪类和伪元素，使用 & 符号来表示当前选择器的父级。像下面这个经典的 clearfix hack：
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
嵌套规则和冒泡
除了选择器嵌套，像 @media 或 @supports 这类 @ 规则也可以进行嵌套。它们会被自动“冒泡”到顶部，并且保持相对顺序不乱，让响应式设计更直观：
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
编译后的输出：
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
运算（Operations）
在 Less 里，+、-、*、/ 这些算术符号不只是用来给数字做加减乘除，颜色和变量也能参与运算。运算时，如果单位能换算，Less 会自动进行；结果单位默认取最左侧操作数的类型：
// 数字转换为相同的单位
@convert: 5cm + 10mm; // 返回 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// 单位换算无效时，忽略单位
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// 带变量的示例
@base: 5%;
@filler: @base * 2; // 返回 10%
@other: @base + @filler; // 结果是 15%
需要注意，乘法和除法在单位处理上简单粗暴：它只做数值运算，单位按照左侧操作数的单位赋值。比如：
@base: 2cm * 3mm; // 结果是6cm
颜色一样可以做运算：
@color: (#224488 / 2); // 结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
不过实话实说，对颜色做运算虽然可行，但在实际项目中，Less 提供的色彩函数往往更顺手，也更容易控制。
calc() 特例
有一点必须提一下：从 Less 3.0 开始，calc() 里是不会自动计算数学表达式的——它只处理变量和嵌套函数的部分。比如：
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))
转义（Escaping）
有些时候你需要原封不动地输出某些字符，就可以用转义。任何被 ~"anything" 或 ~'anything' 包裹的内容都会被当作字符串直接输出，常用于通过变量传递媒体查询等场景：
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
输出结果：
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
当然，在 Less 3.5 版本之后，很多场景下你已经不需要这么麻烦了，可以直接这样写：
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
函数（Functions）
Less 内置了一系列实用函数，用来处理颜色、字符串和数学计算等常见需求。比方说，用 percentage 把 0.5 转成 50%，用 saturate 把颜色饱和度提高 5%，再配合 spin 和 lighten 灵活调整背景色：
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // 返回 `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
命名空间和访问器
请别将它和 CSS 中的 @namespace 或命名空间选择器混为一谈。
很多时候我们希望把相关的 mixin 分个组，像是在一个 #bundle 命名空间下集中管理，方便以后复用：
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { /* ... */ }
.citation { /* ... */ }
}
现在如果想在 #header a 里用上 .button 的样式，直接这样引用：
#header a {
color: orange;
#bundle.button(); // 也可以写成 #bundle > .button
}
顺便提醒一句：如果不想让命名空间本身出现在最终的 CSS 里，只需要在命名空间后加上 ()，比如 #bundle()，这样就不会输出对应的选择器。
映射（Maps）
Less 3.5 之后，mixin 和规则集可以直接当“值映射”来用，像字典键值对一样方便，适合管理主题变量：
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
输出结果：
.button {
color: blue;
border: 1px solid green;
}
作用域（Scope）
Less 的作用域规则和 CSS 很像——变量先找本地，本地没有就往上找“父级作用域”：
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
和 CSS 自定义属性一样，mixin 和变量定义不一定要写在使用的代码前面，以下代码最终结果和上面完全一致：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
注释（Comments）
Less 支持两种注释写法：块级注释和单行注释。块注释会保留到编译后的 CSS 中，而单行注释则会被完全忽略：
/* 一个块注释
* 样式注释！
*/
@var: red;
// 单行注释
@var: white;
导入（Importing）
导入功能和你想的差不多。导入 .less 文件后，里面的变量和 mixin 直接就能用。 .less 文件的扩展名其实可以省略，方便模块化管理：
@import "library"; // library.less
@import "typo.css";
总结
整体看下来，Less 的这些基础用法在实际项目开发中几乎每天都能用到。从变量到嵌套，从 mixin 到运算，每个功能都在解决具体的工程痛点，能显著提升样式编写的效率与可维护性。如果后续想深入了解更多细节，官方文档或者社区资源都是不错的选择，帮助你进一步掌握这款强大的 CSS 预处理器。
