在前端开发中，使用 CSS3 特效可以为页面带来更加炫酷的展示效果，然而 CSS3 语法相对比较复杂，特别是在较为复杂的页面场景下，手写 CSS3 样式难度大、易错等问题常常出现。在这种情况下，使用 LESS 预处理器可以让我们更方便地写出复杂的 CSS3 样式，同时提高代码可维护性、方便代码复用，提高开发效率。
LESS 简介
LESS 是一种 CSS 预处理器，可以使用类似编程语言的方式编写 CSS 样式，包括嵌套、变量、函数、操作符等等特性。LESS 提供了一些方便的编程语言特性，可以让我们更容易地编写 CSS 样式。
LESS 的主要特性如下：
- 变量：能够定义可重用的变量，便于我们进行样式的修改；
- 样式嵌套：可以在一个选择器下定义另外一个选择器。这种方式让样式的结构更加清晰；
- 运算：LESS 支持加、减、乘、除等常见的算术操作；
- Mixin：可以使用一个样式混合到另外一个样式中，用于代码复用；
- Import：可以将多个 LESS 文件合并成一个 CSS 文件，方便管理。
在 LESS 中使用 CSS3 特效
LESS 预处理器并不是给我们带来全新的样式语法，而是在 CSS 基础之上增加了一些编程语言的特性，使得样式的编写变得更加容易。接下来我们将探讨如何使用 LESS 将复杂的 CSS3 特效应用到我们的页面中。
变量
首先，我们可以在 LESS 中定义变量来提高我们的可维护性。变量是一个可以存储数据的容器，在 LESS 中用 @ 符号来定义，例如：
@main-color: #f52887; @border-radius: 5px;
通过定义这些变量，我们就可以在样式中使用它们，例如：
button {
background-color: @main-color;
border-radius: @border-radius;
}这样我们就能在代码中使用 @main-color 代表 #f52887。一旦需要修改颜色，我们只需要修改 @main-color 的值，就可以很方便地更新整个样式。
样式嵌套
CSS 样式的层级关系过于分散，代码的可读性有所下降，LESS 可以通过样式嵌套的方式将不同层级样式代码嵌套在一起，代码结构更为清晰，例如：
.container {
.header {
font-size: 30px;
}
.content {
margin-top: 10px;
}
}上面的样式会输出以下 CSS 代码：
.container .header {
font-size: 30px;
}
.container .content {
margin-top: 10px;
}Mixin
Mixin 是 LESS 中非常实用的一个功能，它可以把一段样式混合到另一段样式中，提高代码复用。Mixin 使用 @mixin 关键字定义，例如：
@mixin gradient-background($start-color, $end-color) {
background: -webkit-linear-gradient(top, @start-color, @end-color);
background: linear-gradient(to bottom, @start-color, @end-color);
}上面的例子创建了一个名为 gradient-background 的 mixin，它接受两个参数，分别是起始颜色和结束颜色。接下来我们可以在样式中使用这个 mixin：
button {
width: 120px;
height: 40px;
@include gradient-background(#ff8a00, #55369b);
}这段代码会将 @start-color 替换成 #ff8a00，将 @end-color 替换成 #55369b。这样，我们就可以轻松传递不同的参数。
运算
LESS 还支持常见的加减乘除运算，例如：
@font-size: 14px;
h1 {
font-size: @font-size * 2;
}这段代码会将 h1 的字体大小设为 28px。
@import
最后，我们可以使用 @import 指令来将多个 LESS 文件合并、编译成一个 CSS 文件。@import 指令不同于 CSS 中的 @import，它并不会导致额外的 HTTP 请求，而只是将另一个 LESS 文件中的样式合并到当前 LESS 文件中。
例如我们有一个 base.less 文件和一个 style.less 文件，其中 base.less 定义一些基础样式，可以在 style.less 中引入：
@import "base.less";
body {
font-size: 14px;
}这样做可以让我们的样式更好组织、管理。
示例代码
下面是一个简单的例子，展示了如何使用 LESS 中的变量、Mixins、Theming 等特性来实现一个带有动态特效的登录页面。
HTML
-- -------------------- ---- -------
---- ------------------
----- -------------------
--- --------------------------- ----------
-------
------ ----------- -----------------------
--------
-------
------ --------------- -----------------------
--------
------- -------------------------- -----------
---- -----------------------
-- --------------------- ---------
-- ---------- -------------------
----
-- --------------------- ---------
-- ---------- --------------------
----
-- --------------------- ---------
-- ---------- ----------------
----
------
-------
------LESS
-- -------------------- ---- -------
-- ---------
--------------- --------
----------------- --------
--------------- ----
------------- ---------- ------ -----------
-- ------
------------------------- --------------- -
-------------- --------
-
-------------------- ----- -
------------ --- --- --- -------
-
------------------- ------- -- -- ----- -
----------- --- --- --- -------
-
---------------------------------- ----------- -
----------- ---------------------------- ------------- ------------
----------- ------------------ ------- ------------- ------------
-
-- -------
------- ------
-------------- -
------ --------
----- --------
------- --------
----- --------
--
-- ---- ------
------------ ----------------------
---------- -
-------- -----
---------------- -------
------------ -------
----------- ------
----------- ------------
-
----------- -
-------- -----
--------------- -------
---------------- -------
------------ -------
-------- -----
------ ------
----------- -----
------ ------------
-----------------
------------
-- -
---------- -----
------------ -------------
-------------
-
----- -
------- ---- --
----- -
----------- --------
------- -----
-------- -----
------ -----
-----------------
-
-
------ -
----------- -----
-------- ---- --
------ -----
------------ -----
------ -----
----------- ---------------
-----------------
------------------------------------ ------------------
------- -
----------- ---------------------- -----
-
-
--------------- -
----------- -----
--------------- -
-------- -------------
------- - -----
----------- -----
------ ------------
----------------------
------- -
------ -----
----------- ------------
-
-
-
-上面的 LESS 代码使用变量定义了一些常用的样式，例如 @primary-color 代表主色调、@border-radius 代表圆角半径等等。接下来我们使用 mixins 定义了一些常用的样式，例如 .rounded-corners 可以让一个元素拥有圆角边框、.text-shadow 可以创建文本阴影、.gradient-background 可以创建渐变背景等等。
最后，我们使用变量和样式混入创建了一个主题系统，可以根据变量 @theme 的值选择不同的主题颜色。
结语
LESS 是一个非常出色的 CSS 预处理器，可以省去我们在手写复杂 CSS3 样式时复杂的计算和繁琐的代码。通过 LESS，我们可以用 JavaScript 类似的语法，定义变量、嵌套规则、使用运算和创建 Mixin 等等。在使用 LESS 的同时，我们也可以加深对 CSS3 的理解，总结出更加灵活模块化的样式组织方式，进一步提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ffc1348841e9894f7f7e3