什么是 LESS
LESS 是一种 CSS 预处理语言，它可以让我们使用类似编程语言的方式来编写 CSS，避免了平常我们在编写 CSS 时需要手动修改重复的代码而忘掉的计算和逻辑等，还能够使用变量、函数、混合等高级特性，提高代码的复用性和可维护性。
LESS 相关框架的使用
Bootstrap
Bootstrap 是目前最流行的前端框架之一，使用 LESS 作为开发语言，为网页设计和开发提供了一系列模板、基础 CSS 和 JS 代码。
Bootstrap 的 LESS 源代码位于目录 ./less 下，包含所有的样式和变量定义。如果要使用 LESS 定义如下方代码块中的变量：
@primary-color: #007bff;
可以在自己的 LESS 中使用 @import 导入 bootstrap.less 文件，并在导入之前设置这些变量的值，示例代码如下：
@primary-color: #e83e8c; @import "bootstrap.less"
这样，我们就可以自定义 Bootstrap 的基本样式了。在实际项目中，我们可以维护一个 variables.less 文件，通过设置变量来控制项目的风格。
Semantic UI
Semantic UI 是另一款非常流行的前端框架，同样使用 LESS 作为开发语言，其样式定义了一套具有语义化的 CSS 类名，能够更加清晰地描述网页的结构。
Semantic UI 在安装之后会生成一个名为 semantic.less 的 LESS 文件，该文件包含了 Semantic UI 所有的 CSS 代码。用户可以在开发过程中通过对 Semantic UI 的样式进行继承和覆盖来达到自己想要的效果。
LESS 相关框架的踩坑记
报错：Cannot find module 'less'
在使用 LESS 框架的时候，如果使用 npm 安装之后还需要手动在项目的 package.json 文件里添加以下语句：
"dependencies": {
"less": "^3.0.0"
},这是由于你的 LESS 框架中所需的 less 包在安装时没有被自动添加进 package.json 中导致的。
变量无法生效
在使用 LESS 定义变量时，我们要注意变量定义的顺序问题，比如以下两行：
@primary-color: #007bff; @primary-color: #fd7e14;
在 LESS 解析时，后面的变量定义会将之前的定义覆盖掉。因此，在编写 LESS 代码时，我们需要注意变量定义的顺序，确保自定义变量的生效。
总结与指导
使用 LESS 相关框架可以极大地提高前端开发效率以及代码的可维护性，但是在使用过程中也需注意一些细节问题，避免一些易犯的错误。
建议在使用前仔细研究所用框架的文档，了解其特性和用法，掌握其核心代码，这样会更加方便我们快速完成项目开发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65856577d2f5e1655d00a233