LESS 是一种 CSS 预处理器，拥有类似编程语言的特性。它可以让你使用类似于变量、函数、条件语句等功能，使 CSS 编写更加简洁、规范和易维护。本文将介绍一些 LESS 的使用技巧，可以让你更加高效地编写 LESS 源文件。
1. 使用变量
在 LESS 中，可以使用“变量”来存储一些常用的属性值，比如色值、字体、大小等。这样，我们就可以通过一个变量名来维护这些属性，而不用在每个地方都手写这些值，减少了代码量，也便于统一维护。
@color: #0088cc;
@font-size: 14px;
.button {
color: @color;
font-size: @font-size;
padding: 10px;
}2. 嵌套语法
LESS 允许嵌套语法，可以更好地模拟 HTML 结构和样式之间的关系，可以减少选择器的嵌套层级。
-- -------------------- ---- -------
---------- -
------ -------
------- -
------- -----
-- -
---------- -----
------- --
------------ -----
-
- -
------ -----
---------------- -----
------- -
---------------- ----------
-
-
-
----- -
------------ ------
-------- -
----------- --------
-- -
---------- -----
------- --
-
- -
---------- -----
------- ---- --
------------ ----
-
-
-
-3. 使用混入（Mixin）
混入是 LESS 提供的一种将一组样式包装成一个“混合类”，方便在别处引用复用。混合类可以被赋值给任意选择器，并且可以有自己的参数。
-- -------------------- ---- -------
------------- ----- ------- ------ -
---------- ------
------ -------
----------- -------
-------------- -----
-
-------- -
------------ -----
- -
---------- -----
------------ ----
------- -----
-
-------- -
------------ ------
-
-4. 函数
LESS 还支持函数的定义和调用，可以根据传入的参数返回不同的值。比如，我们可以编写一个函数，将 px 值转化为 em 值。
-- -------------------- ---- -------
---------------- -----
-------------------- -
---------- --------------- - --------------- - ---- ---
------ --------------- ----
-
----- -
---------- ----------------
------------ ----------------
-5. 前缀
最后，我们来介绍一个有用的小技巧。在 LESS 中，可以使用 “&” 符号表示父选择器。这个特性可以用来生成 CSS3 的兼容前缀。
-- -------------------- ---- -------
---------------------- ---------- ----- ----------------- ------------ -
------------------- --------- --------- -----------------
---------------- --------- --------- -----------------
--------------- --------- --------- -----------------
-------------- --------- --------- -----------------
----------- --------- --------- -----------------
-
------- -
------------------------------
------- -
----------------- ----
-
-上面这个例子，我们用 .transition() 定义了一个包含兼容前缀的 CSS3 过渡效果。然后在 .button 上引用即可，而同时生成的 CSS 代码中，就自动加上了浏览器兼容前缀。
以上是 LESS 的一些使用技巧，希望本文可以帮助你更好地掌握 LESS，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67822985935627c900fa5ff7
