一、Less简介

1.1 什么是Less

Less​ 是一门CSS的预处理语言，是一种动态样式语言，属于CSS预处理器的范畴。它扩展了CSS语言，增加了变量、Mixin（混合）、函数等特性，使CSS更易维护和扩展。

Less中文官网：​ Less.js 中文网

1.2 CSS的短板

CSS作为一门标记性语言，存在以下问题：

1.3 预处理语言的诞生

随着Web技术的发展，出现了预处理语言，让CSS彻底变成了一门可以使用变量、循环、继承、自定义方法等多种特性的标记语言，逻辑性得以大大增强。

三大主流CSS预处理器：

二、Less的安装与使用

2.1 安装方式

方式一：VSCode插件（推荐）

在VSCode中搜索并安装Easy LESS​ 插件，保存.less文件时会自动编译生成对应的.css文件。

方式二：HBuilderX插件

在HBuilderX中安装对应的Less插件，同样可以实现自动编译。

方式三：运行时编译（不推荐）

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

缺点：编译页面时将Less转成CSS，会影响网站性能。

三、Less注释

// 写法一：这是less的注释，CSS看不见，不会被编译到CSS文件中 /* 写法二：这是CSS的注释，CSS文件可以看到，会被编译到CSS文件中 */

四、变量（Variables）

4.1 普通变量

语法：​@变量名: 样式值;

作为普通属性值使用时，直接使用@变量名。

// 定义普通变量 @c: red; @w: 100px; #wrap { width: @w; height: @w; background-color: @c; h1 { color: @c; } }

4.2 变量作为选择器或属性名

使用@{变量名}的格式。

@selected: #wrap; @c: red; @w: width; @{selected} { @{w}: 300px; height: 300px; border: 10px double black; background-color: @c; margin: 0 auto; }

4.3 变量作为URL

@u: '../img/img1.png'; .wrap { width: 200px; height: 200px; background-color: red; background: url(@u) no-repeat; background-size: cover; }

五、嵌套规则（Nesting）

5.1 基本嵌套规则

Less允许使用嵌套的方式编写CSS，反映DOM结构层级关系。

#wrap { width: 300px; height: 300px; border: 10px solid red; .box1 { width: 100px; height: 100px; background: pink; } .box2 { width: 50px; height: 50px; background: deeppink; } }

5.2 & 的使用

&符号表示当前选择器的父级，常用于伪类、伪元素等场景。

.box { &:hover { background-color: red; } &::after { content: ""; display: block; } }

六、混合（Mixins）

混合是将一系列属性从一个规则集引入到另一个规则集的方式（类似于Ctrl C + Ctrl V）。混合的定义在Less中明确使用.的形式来定义。

6.1 普通混合（会编译到原生CSS中）

// 定义混合（重复的代码提取出来） .box { width: 100px; height: 100px; margin-bottom: 10px; } #wrap { width: 300px; height: 300px; border: 10px solid red; .box1 { .box(); // 使用混合 background: pink; } .box2 { .box(); // 使用混合 background: deeppink; } }

6.2 不带输出的混合

定义时加括号，不会被编译到CSS中。

// 定义不带输出的混合 .box() { width: 100px; height: 100px; margin-bottom: 10px; }

6.3 带参数的混合

// 定义带参数的混合 .box(@w, @h, @b) { width: @w; height: @h; margin-bottom: @b; } #wrap { .box1 { .box(100px, 100px, 10px); // 传入参数 background: pink; } .box2 { .box(50px, 50px, 20px); // 传入参数 background: deeppink; } }

6.4 带参数且有默认值的混合

// 定义带参数并且有默认值的混合 .box(@w: 100px, @h: 100px, @b: 10px) { width: @w; height: @h; margin-bottom: @b; } #wrap { width: 300px; height: 300px; border: 10px solid red; .box1 { .box(); // 使用默认值 background: pink; } .box2 { .box(50px, 50px, 20px); // 传入参数覆盖默认值 background: deeppink; } }

6.5 命名混合

可以通过指定参数名来传参，不关心参数顺序。

// 定义带参数并且有默认值的混合 .box(@w: 100px, @h: 100px, @b: 10px) { width: @w; height: @h; margin-bottom: @b; } #wrap { width: 300px; height: 300px; border: 10px solid red; .box1 { // 使用命名混合，指定参数名 .box(@b: 10px, @w: 100px, @h: 100px); background: pink; } .box2 { .box(50px, 50px, 20px); background: deeppink; } }

6.6 匹配模式

可以定义一个混合库文件（如minx.less），在实际写Less时引入混合库。

minx.less 文件内容：

// 定义匹配混合 .arrows(@_, @w: 10px, @c: red) { width: 0; height: 0; border: @w solid @c; } .arrows(Top, @w: 10px, @c: red) { border-color: transparent transparent @c transparent; } .arrows(Bottom, @w: 10px, @c: red) { border-color: @c transparent transparent transparent; } .arrows(Left, @w: 10px, @c: red) { border-color: transparent @c transparent transparent; } .arrows(Right, @w: 10px, @c: red) { border-color: transparent transparent transparent @c; }

主文件引入并使用：

@import url(./minx.less); // 或 @import './minx.less'; #arrows { .arrows(Right, 30px, green); // 使用匹配混合 }

6.7 arguments变量

@arguments代表所有传入的参数。

.b(@w: 10px, @s: solid, @c: red) { // border: @w @s @c; border: @arguments; // @arguments === @w @s @c } #wrap { width: 200px; height: 200px; background: pink; .b(); }

七、运算（Operations）

Less支持算术运算，可以对数值进行加减乘除操作。

@w: 100px; #wrap { width: @w * 2; // 200px height: 200px; background-color: red; }

八、避免编译（Escaping）

有时我们希望某些CSS代码不被Less编译，原封不动地交给CSS处理。

语法：​~"值"

#wrap { // calc() 是CSS3的新增功能，用来指定元素的长度 // ~"..." Less不编译，原封不动交给CSS编译 width: ~"calc(700px - 200px)"; height: 100px; background-color: red; }

九、继承（Extend）

继承与混合的区别：

.box { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; &:hover { background-color: red; } } #wrap { width: 300px; height: 300px; border: 10px solid red; margin: 50px auto; position: relative; } #box1 { width: 200px; height: 200px; background-color: orange; // 继承使用公共的样式 &:extend(.box); } #box2 { width: 100px; height: 100px; background-color: pink; // 继承使用公共的样式（包括:hover等） &:extend(.box all); }

编译后的CSS：

.box, #box1 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .box:hover, #box2:hover { background-color: red; } #box2 { width: 100px; height: 100px; background-color: pink; }

注意：​.box all表示继承.box及其所有相关的样式（如伪类等），而不加all只继承.box本身的样式。

十、Less核心功能速查表

十一、总结

本文详细介绍了Less预处理器的核心知识点：

1. 基础概念：Less是什么，与Sass、Stylus的对比

2. 安装使用：VSCode插件、运行时编译等方式

3. 变量：普通变量、选择器/属性名变量、URL变量

4. 嵌套规则：基本嵌套、&符号的使用

5. 混合：普通混合、不带输出混合、带参混合、命名混合、匹配模式、arguments变量

6. 运算：数值的加减乘除

7. 避免编译：使用~""跳过Less编译

8. 继承：与混合的区别，使用:extend实现代码复用

掌握Less后，你将能够大幅提升CSS的开发效率和代码可维护性，特别是在大型项目中，Less的优势会更加明显。