1. LESS 和 CSS 简介
LESS 是一种 CSS 预处理器，它为 CSS 引入了变量、函数、混合、嵌套规则等功能，增强了 CSS 的功能，并且使得 CSS 更易于维护和扩展。LESS 可以通过编译将 LESS 代码转换为 CSS 代码，然后在浏览器中使用。
CSS 是一种用于定义网页样式的语言，它包含了大量的规则和属性，可以用于控制网页的布局、颜色、字体等方面。CSS 的格式和语法比较简单，是前端开发中的必备技能之一。
2. LESS 和 CSS 的区别
2.1 变量和常量
LESS 可以使用变量和常量，这样可以减少代码的重复，提高代码的可维护性。在 LESS 中定义变量使用 @ 符号，定义常量使用 @@ 符号。例如：
/* 定义变量 */ @primary-color: #007bff; /* 定义常量 */ @@page-width: 1024px;
CSS 中没有变量和常量的概念，所以需要重复输入相同的值，这增加了代码量，也不利于维护。
2.2 嵌套规则
LESS 支持嵌套规则，可以将相关的样式规则组织到一起。例如：
-- -------------------- ---- -------
-- ---- ------ --
------- -
-- -
---------- -----
------------ -----
-
- -
---------- -----
------ -----
-
- -
------ ---------------
------- -
---------------- -----
-
-
-CSS 中没有嵌套规则的方式，需要通过类名或选择器来组织相关的样式规则，这使得 CSS 的代码结构较为分散，不易于维护。
2.3 混合
LESS 支持混合功能，可以将一组样式规则定义为一个“混合”，然后在需要的地方进行调用。例如：
-- -------------------- ---- -------
-- ---- ---- --
------------------------- ---- -
-------------- --------
---------------------- --------
------------------- --------
-
-- ---- --
------- -
-------------------
-- -
-----------------------
-
-CSS 中没有混合的功能，需要将样式规则分别复制到需要的地方，这使得 CSS 在维护时较为麻烦。
2.4 导入和嵌入
LESS 支持导入和嵌入功能，可以将其他 LESS 文件导入到当前文件中，也可以将当前 LESS 文件嵌入到其他 LESS 文件中。例如：
-- -------------------- ---- -------
-- ---- ---- -- --
------- -----------------
-- ----- ---- --- --
------- -
------ ------ --- ----------- ------ -
----------------- -----
-
-CSS 中没有导入和嵌入的功能，需要将样式规则复制到需要的地方，这使得 CSS 的代码结构难以组织，不易于维护。
3. 如何使用 LESS
3.1 安装 LESS
在使用 LESS 之前，需要先安装 LESS 编译器。可以使用 npm 安装 LESS，命令如下：
npm install -g less
3.2 编写 LESS
编写 LESS 的方式与编写 CSS 的方式类似，只是需要注意 LESS 中的变量、常量、嵌套规则和混合等特性。
3.3 编译 LESS
编写完 LESS 代码后，需要将 LESS 代码编译为 CSS 代码，才能在浏览器中使用。可以使用命令行编译 LESS，命令如下：
lessc styles.less styles.css
其中，styles.less 是 LESS 文件的路径，styles.css 是编译后的 CSS 文件的路径。
3.4 引用 CSS 文件
在 HTML 文件中引用 CSS 文件时，直接引用编译后的 CSS 文件即可。例如：
<link rel="stylesheet" href="styles.css">
4. 总结
LESS 和 CSS 都是前端开发中不可或缺的技术，但是 LESS 比 CSS 更加强大和灵活，可以帮助开发者提高代码的可维护性和扩展性。因此，建议前端开发者学习和使用 LESS 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e56ecaf6b2d6eab30dd641