你是否曾感到 CSS 写起来很繁琐、冗余，同时又因为众多类名导致维护起来很难？如果你也有类似的问题，那么这篇文章就是为你准备的。
LESS 是一款 CSS 预处理器，它简化了 CSS 的编写并提高了其可维护性。本文将讲解 LESS 的基础语法和使用方法，以及如何用 LESS 来重构你的 CSS 样式代码。
LESS 的基础语法
LESS 的核心语法和 CSS 基本相同，但是它提供了一些新增的语法元素，比如变量、嵌套规则、混合(mixins)、函数等，可以让开发者更轻松地编写可维护的样式。
变量
在 LESS 中，你可以通过 @ 符号来声明一个变量。例如，你可以这样声明一个颜色变量：
@brand-color: #007bff;
然后你可以在其他样式中使用这个变量：
.navbar {
color: @brand-color;
}这样一来，当你需要修改这个颜色时，只需修改变量的值即可。
嵌套规则
LESS 也支持写嵌套的 CSS 规则，这样可以让你的样式更具有层次感。例如：
.navbar {
background-color: #f5f5f5;
color: #333;
a {
color: @brand-color;
}
}混合
混合(mixins)是 LESS 中比较有用的功能之一。通过混合，你可以定义一组样式，并在需要时把它们插入到你的样式中。例如：
-- -------------------- ---- ------- ----------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ------- - -------------------- -
在这个例子中，我们定义了一个 .border-radius() 混合，它接收一个参数 @radius，用于定义元素的圆角半径。然后我们在 .button 样式中调用它，从而将圆角半径应用到按钮上。
函数
LESS 定义的函数让你可以在样式中执行一些计算。例如：
-- -------------------- ---- ------- ----------- ----- ------------------ ---- ---------------------- --------------- - ------------------- ---- - ------------ ---------------------- -
在这个例子中，我们定义了一个 ceil() 函数，它用于将 @font-size 和 @line-height-base 乘积向上取整，得到最终的 @line-height-computed 值。然后我们在 body 样式中应用这个计算结果。
LESS 的使用方法
LESS 的使用方法相对来说比较简单，我们只需要在项目中引入 LESS 文件，然后用 <link> 标签将其转换成 CSS。
首先，我们需要在项目中安装 LESS：
npm install less --save-dev
接下来，在你的 LESS 文件中编写样式代码。例如，在 style.less 中编写以下样式：
-- -------------------- ---- -------
-- ------
------------- --------
-- ----
----------------------- -
---------------------- --------
------------------- --------
-------------- --------
-
-- ----
------- -
----------------- --------
------ -----
--------------------
- -
------ -------------
-
-然后，我们需要在 HTML 文件中引入 LESS 和样式文件：
<link rel="stylesheet/less" type="text/css" href="style.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.3/less.min.js" type="text/javascript"></script>
这样一来，LESS 会自动将 style.less 转换成 CSS 并加载到我们的页面中。
用 LESS 重构 CSS 样式
与直接编写 CSS 相比，使用 LESS 重构样式可以让 CSS 样式更具有层次感和可读性。例如，我们可以这样重构 Bootstrap 样式：
-- -------------------- ---- -------
-- ------ --
------------- --------
-------------- --------
------------ -----
-- ----
----------------------- -
---------------------- --------
------------------- --------
-------------- --------
-
-- -- --------- -- --
------- -
----------------- --------------
-------------- --- ----- ------------
------------------
------------- -
------ -------------
-
--------- -
------ -----------
------- -
------ -------------
-
-
-在这个例子中，我们将 Bootstrap 的 .navbar 样式重构了一下，通过 LESS 的嵌套规则、变量和混合，让代码更加简洁易读。
总结
通过学习 LESS，我们可以更轻松地编写可维护的 CSS 样式代码，同时提高我们的开发效率。因此，我们建议大家在日常开发中尝试使用 LESS，从而让自己的样式代码更加优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64670f4f968c7c53b077714e
