CSS是 web 前端开发中必不可少的一部分，它能够定义页面的样式，使得网站变得美观、易于阅读。然而，当你的项目越来越大，你很快就会发现，CSS 可以变得异常复杂。这时候，使用 CSS 预处理器来编写 CSS 代码就变得很有必要了，其中 LESS 和 SASS 是两个最受欢迎和广泛使用的预处理器。
本文将会介绍一些关于 LESS 和 SASS 的基本概念和语法，以及如何通过它们来编写高效的 CSS 代码。
一、了解 LESS 和 SASS
LESS 和 SASS 都是 CSS 预处理器，它们允许你编写更加简洁，易于维护的 CSS 代码。它们具有类似的语法，包括：
- 变量
- 混合器 (Mixin)
- 函数
- 继承 (Extend)
- 运算符
二、使用 LESS 和 SASS 编写高效的 CSS 代码
1. 变量
变量是 LESS 和 SASS 中最基础的功能之一。它们可以用来储存任意类型的数值，如颜色、字符串等，并且在后续的代码中进行调用。在 LESS 中，我们可以用 @ 来表示变量，而在 SASS 中，$ 来表示变量。
举个例子，在 LESS 中我们可以这么定义一个变量：
@primary-color: #007bff;
在 SASS 中我们可以这么定义一个变量：
$primary-color: #007bff;
这样我们就可以在后续的代码中使用这个变量，比如：
.header {
background-color: @primary-color;
}.header {
background-color: $primary-color;
}通过使用变量，我们可以在多个地方使用同样的值，从而避免了代码中的魔法值。
2. 混合器
混合器可以让我们定义一组 CSS 属性，然后在需要时调用这些属性。在 LESS 中我们使用 .mixin 来定义混合器，而在 SASS 中使用 @mixin 来定义混合器。
举个例子，在 LESS 中我们可以这么定义一个混合器：
.border-radius (@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}在 SASS 中我们可以这么定义一个混合器：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}混合器可以接收多个参数，这样我们就可以定义多种不同风格的样式。例如：
.border-shadow (@x: 0, @y: 0, @blur: 1px, @color: black) {
-webkit-box-shadow: @x @y @blur @color;
-moz-box-shadow: @x @y @blur @color;
box-shadow: @x @y @blur @color;
}@mixin border-shadow($x: 0, $y: 0, $blur: 1px, $color: black) {
-webkit-box-shadow: $x $y $blur $color;
-moz-box-shadow: $x $y $blur $color;
box-shadow: $x $y $blur $color;
}然后我们就可以像这样来使用混合器：
.button {
.border-radius(4px);
.border-shadow(0, 0, 8px, rgba(0,0,255,0.5));
}.button {
@include border-radius(4px);
@include border-shadow(0, 0, 8px, rgba(0,0,255,0.5));
}混合器的好处在于，它们使得我们能够重用相同的 CSS 代码，从而在编写复杂的界面时减少了代码量，提高了代码的可读性。
3. 函数
函数是 LESS 和 SASS 的高阶特性之一。我们可以用函数来预处理一些值，比如颜色的亮度、饱和度，甚至可以在函数中嵌套其他函数。
在 LESS 中，我们可以定义和调用函数非常简单：
-- -------------------- ---- ------- ------------------- --------- - -------- ------------------ ---------- - -- - ------ -------- - -- - ------ ------------------- ----- -
在 SASS 中，我们定义和调用函数也非常简单：
-- -------------------- ---- ------- --------- ------------------ --------- - ------- ------------------ ---------- - -- - ------ ------------------- ----- - -- - ------ ------------------ ----- -
通过使用函数，我们可以非常方便的预处理 CSS 属性，例如调整数值、转换颜色等。
4. 继承
继承可以让我们把一个 CSS 类的样式应用到另一个类的样式中。
在 LESS 中我们用 “:extend()” 来继承另一个选择器：
.button {
.button-secondary {
&:extend(.button);
background-color: white;
color: #007bff;
}
}在 SASS 中，我们使用 “@extend” 来继承一个选择器：
.button {
.button-secondary {
@extend .button;
background-color: white;
color: #007bff;
}
}通过使用继承，我们可以减少代码中的重复，提高代码的可维护性。
三、结论
通过使用 LESS 和 SASS 这两个工具，我们可以让 CSS 变得更加易于阅读、维护和扩展。它们可以让你写出更优秀的 CSS 代码，并且可以加快开发速度。我们希望通过本篇文章的内容，大家可以更好地理解 LESS 和 SASS 的语法和用法，并从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671e17ce2e7021665ef5bf7e