目录
一、为什么要学习 Less
在前端开发的世界里，CSS（层叠样式表）是网页呈现美观的关键技术。然而，随着项目规模的不断扩大和网页功能的日益复杂，传统 CSS 在编写和维护过程中逐渐暴露出诸多痛点。
想象一下，你正在开发一个大型电商网站，页面中大量元素需要使用品牌主色调，比如 #007BFF。在传统 CSS 中，每次使用这个颜色都得完整写出 #007BFF ，一旦品牌方决定更改主色调，你就得在成百上千行代码中逐一修改，稍有遗漏就会出现样式不一致的问题 ，可维护性极差。这就好比在一个大型图书馆里，每本书的某个关键信息都分散在不同位置，当这个信息需要更新时，查找和修改的工作量巨大。
再比如，你想为网站的按钮、导航栏等多个组件设置相同的圆角样式。在 CSS 中，你需要为每个组件重复编写 border - radius 属性相关代码，大量的重复代码不仅增加了代码量，还让代码变得冗长、难以阅读。这就如同在建造一座大楼时，每个房间都要单独制作相同的门窗，既浪费材料又耗费时间。
还有，当你要创建复杂的布局，如响应式布局时，CSS 的媒体查询语法会让代码结构变得混乱。不同屏幕尺寸下的样式分散在各处，很难快速定位和修改某个特定屏幕尺寸下的样式。
而 Less 作为一种 CSS 预处理器，就像是给 CSS 加上了 “智能助手”，完美解决了上述问题。Less 允许你定义变量，将 #007BFF 这样常用的值存储在变量中，以后只需修改变量的值，所有使用该变量的地方都会自动更新，大大提高了可维护性。对于重复样式，Less 提供的混合（Mixins）功能，能把一组样式规则封装起来，在需要的地方直接调用，避免重复编写。在处理复杂布局时，Less 的嵌套规则让代码结构更加清晰，媒体查询等也能更有条理地组织。所以，学习 Less，就是掌握一种更高效、更智能的前端样式开发方式，让你的前端开发之路更加顺畅。
二、Less 是什么
Less，全称 Leaner Style Sheets，是一种动态样式表语言，属于 CSS 预处理器大家庭中的重要成员 。它诞生的使命就是为了弥补原生 CSS 在功能和灵活性上的不足，就像是给 CSS 这把 “基础工具” 升级成了 “多功能瑞士军刀”。
从本质上讲，Less 是在 CSS 语法基础上进行的扩展。它保留了 CSS 的基本语法结构，让熟悉 CSS 的开发者能够轻松上手。同时，Less 引入了一系列强大的特性，让样式表的编写和管理上升到一个新的高度。比如说变量，在 Less 中，你可以使用 @符号定义变量，将常用的 CSS 值，像颜色、字体大小、边距等，赋予一个变量名。例如：@primary-color: #007BFF; ，这里就定义了一个名为 @primary-color 的变量，代表一种蓝色。后续在编写样式时，直接使用@primary-color ，就能引用这个颜色值，无需反复书写具体的颜色代码。当需要修改颜色时，只需要修改变量的值，所有使用该变量的样式都会自动更新，这大大提高了代码的可维护性和一致性。
嵌套规则也是 Less 的一大特色。在 CSS 中，当处理复杂的层级结构时，选择器的书写会变得繁琐且容易出错。而在 Less 中，你可以像 HTML 一样进行选择器的嵌套。比如，有一个导航栏的 HTML 结构，包含ul 、li 、a 元素，在 Less 中可以这样写：
.nav {
ul {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
color: #333;
&:hover {
color: #007BFF;
}
}
}
}
}
这样的代码结构清晰直观，一目了然，很容易就能看出各个层级之间的样式关系，也减少了重复书写父选择器的麻烦，代码量大幅减少，可读性显著增强 。
混合（Mixins）功能同样强大。它允许你定义一组样式规则，然后在需要的地方复用这些规则，就像使用函数一样。例如，你经常需要为元素设置圆角样式，就可以定义一个混合：
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
之后，在任何需要设置圆角的元素样式中，直接调用这个混合，如：
.box {
.border-radius(5px);
}
这样，不仅避免了重复编写大量的圆角样式代码，还能方便地统一修改和管理圆角样式。
除此之外，Less 还支持运算、函数、导入等多种特性。通过这些特性，开发者能够以更高效、更灵活的方式编写 CSS 样式，无论是小型项目还是大型复杂项目，Less 都能发挥出巨大的优势，让前端样式开发变得更加轻松愉快。
三、快速上手 Less
（一）安装 Less
在开始使用 Less 编写样式之前，我们需要先安装 Less 编译器。目前，通过 npm（Node 包管理器）来安装 Less 是最为常见和便捷的方式 。在安装 Less 之前，请确保你的计算机已经安装了 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，npm 是随同 Node.js 一起安装的包管理工具，它能帮助我们轻松地安装和管理各种 JavaScript 包，Less 就是其中之一。
如果你还没有安装 Node.js，可以前往 Node.js 官方网站（https://nodejs.org/ ），根据你使用的操作系统（Windows、Mac OS 或 Linux）下载对应的安装包进行安装。安装过程中，按照默认设置一路点击 “下一步” 即可完成安装。安装完成后，打开命令行工具（Windows 下是命令提示符或 PowerShell，Mac OS 和 Linux 下是终端），输入node -v 和npm -v ，如果能正确输出版本号，就说明 Node.js 和 npm 安装成功了 。
接下来，在命令行中运行以下命令来全局安装 Less：
npm install -g less
这里的-g 参数表示将 Less 安装到全局环境中，这样你就可以在任何目录下使用 Less 提供的命令行工具lessc 。安装过程中，npm 会从 npm 仓库下载 Less 及其依赖项，并自动完成安装。等待安装完成后，你就可以开始使用 Less 了 。
（二）编译 Less 文件
安装好 Less 之后，我们就可以使用lessc 命令来编译 Less 文件了。lessc 是 Less 提供的命令行编译器，它的基本语法如下：
lessc [选项] [源文件路径] [目标文件路径]
例如，你在项目目录下有一个名为styles.less 的 Less 文件，你想将它编译成同名的 CSS 文件styles.css ，那么在命令行中进入styles.less 所在的目录，然后运行以下命令：
lessc styles.less styles.css
执行上述命令后，lessc 会读取styles.less 文件的内容，将 Less 代码编译成标准的 CSS 代码，并将编译结果输出到styles.css 文件中。如果你的 Less 文件中没有语法错误，你就可以在项目中使用生成的styles.css 文件了 。
在实际开发中，每次修改 Less 文件都手动执行编译命令会比较繁琐。为了提高开发效率，我们可以使用lessc 的watch 模式，让它自动监听 Less 文件的变化并实时编译。命令如下：
lessc -w styles.less styles.css
这里的-w 参数表示开启watch 模式。当你运行这个命令后，lessc 会在后台持续运行，监听styles.less 文件的任何修改。一旦你保存了styles.less 文件，lessc 会立即检测到文件变化，并自动重新编译生成styles.css 文件，这样你就可以在浏览器中实时看到样式的更新，无需手动重复执行编译命令，大大提升了开发的便利性和效率 。
四、Less 核心语法详解
（一）变量的奇妙世界
在 Less 中，变量是一个强大的工具，它就像是给你一个魔法盒子，你可以把常用的 CSS 值存进去，然后在需要的时候随时取用 。变量的声明非常简单，使用@ 符号作为前缀，后面跟着变量名和值。比如，我们可以这样定义一些常用的颜色和字体大小变量：
@primary-color: #007BFF; // 主色调
@secondary-color: #6C757D; // 次要颜色
@font-size-base: 16px; // 基础字体大小
在实际编写样式时，就可以直接使用这些变量，而不用反复书写具体的值。例如：
body {
color: @primary-color;
font-size: @font-size-base;
}
这样做的好处显而易见。假设项目进行到一半，客户突然要求更改主色调。在传统 CSS 中，你需要在整个项目的样式表中逐一查找并修改所有使用该颜色的地方，这不仅耗时费力，还容易出错。而在 Less 中，你只需要修改@primary-color 变量的值，所有使用这个变量的样式都会自动更新，轻松又高效，大大提高了代码的可维护性 。变量还可以在其
最低0.47元/天 解锁文章
扫一扫
2099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
