LESS 是一种 CSS 预处理器，可以使用嵌套语法、变量和混合等功能，让 CSS 写起来更加简单和有趣。它基于 CSS 语法，并扩展了一些常用的 CSS 功能，是前端开发中常用的工具之一。本文将为你介绍常用的 LESS 命令及使用技巧。
变量
LESS 可以使用变量来存储各种值，包括数字、颜色和字符串。定义变量可以让你在后续的代码中多次使用同一个值。
@brand-color: #42a5f5; @font-size: 16px; @primary-font: "Helvetica Neue",Helvetica,Arial,sans-serif;
在定义变量时，需要使用 @ 符号。变量的值可以是颜色、长度值、文本等等。
混合
混合是 LESS 中的一种重要的功能。它可以让你定义一些可重用的代码段，然后在样式表中通过调用来实现样式的复用。
定义混合时使用 .mixin() 标识符（或者也可以使用 @mixin 标识符），然后在需要使用混合的地方插入 .mixin() 标识符。
-- -------------------- ---- ------- ---- - ------ ----- ----------------- -------- ------- ----- -------------------- - ----------------------- ---- - ---------------------- -------- ------------------- -------- -------------- -------- -展开代码
除了可以定义不带参数的混合，还可以定义带参数的混合，例如上面的 .border-radius(@radius: 3px)。这个混合定义了一个默认参数为 3px 的圆角半径，如果需要自定义可以传入其他值。
还可以使用混合来继承样式：
.btn-primary { .btn; background-color: #007bff; }
这里的 .btn-primary 继承自 .btn 一些常见的样式，同时重置了 background-color 属性。你可以将混合看作是一种 CSS 中的函数，在适当的地方调用即可。
嵌套
LESS 允许你在 CSS 中嵌套其他样式。这可以让 CSS 更加简洁和结构化。例如：
-- -------------------- ---- ------- ------- - ----------------- ----- ------ ----- ------------- - ---------- ----- ------------ ----- --------------- ---------- - ----------- - ----------- ----- ------- -- -------- -- -- - -------- ------------- - - -------- ------ -------- ---- ----- ---------------- ----- ------- - ----------------- ----- - - - - -展开代码
这里的 .navbar-nav li a 代表了嵌套的关系，可以让样式表结构更加清晰。通常情况下，你可以将嵌套用于 class 选择器中的子元素或伪类，使代码更加清晰和易于阅读。
运算符
LESS 也支持一些简单的运算符，例如加法和减法。例如：
@base-size: 16px; @line-height: (@base-size * 1.5);
这里的 @line-height 将被计算为 24px，因为 16 * 1.5 = 24。你可以使用运算符在同一个样式块或 .mixin() 中进行运算，这可以让 CSS 更加灵活。
除了加法和减法运算符，LESS 还支持比较运算符和逻辑运算符。它们可以在样式表中进行条件判断，并根据满足条件的情况生成不同的样式。
导入文件
在 LESS 中，你可以使用 @import 将一个 LESS 文件导入到另一个 LESS 文件中。这可以让你在编写样式表时将不同的样式拆分到不同的文件中，以使代码更加清晰和易于维护。
例如，你可以将所有的字体和颜色定义放在一个名为 variables.less 的文件中：
@red: #ff0000; @blue: #0000ff; @font-size: 16px;
然后你可以将这个文件导入到一个名为 style.less 的文件中：
-- -------------------- ---- ------- ------- ------------ ---- - ---------- ----------- ------ ----- - - - ------ ------ -展开代码
通过这种方式，你可以更加灵活地组织你的样式表。
结语
上面介绍了 LESS 的一些常用命令和使用技巧。LESS 是一个很强大的工具，可以让编写 CSS 更加方便和有趣。随着开发经验的增加，你会发现更多的有趣特性和技巧。通过使用 LESS，可以使您的样式表更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c43d3d6e1fc40e36d223e8
