前言
在现代的前端开发中，CSS 是必不可少的一部分。然而，CSS 的语法却经常被开发者吐槽。CSS 语法的不足之处在于它缺乏变量、嵌套、函数等基础功能，这些功能是编写 CSS 时非常重要的。SASS 就是解决这些问题的一种工具。
SASS 是一种 CSS 预处理器，它允许开发者使用变量、嵌套、混合等功能来编写更加优雅和易于维护的 CSS 代码。这篇文章将介绍 SASS 的基础知识，包括变量、嵌套、混合等概念的讲解和示例代码。
变量
变量是 SASS 中最基础的功能之一。变量允许开发者在样式表中声明值，并在样式表中多次使用这些值。这样，当需要更改这些值时，只需要更改变量的值，而无需在样式表中手动更改每个使用该值的地方。
变量在 SASS 中使用 $ 符号来声明，例如：
$primary-color: #007bff;
在上面的代码中，我们声明了一个名为 $primary-color 的变量，并将其值设置为 #007bff。在样式表中，我们可以使用该变量来指定颜色值：
a {
color: $primary-color;
&:hover {
color: darken($primary-color, 10%);
}
}在上面的代码中，我们将 $primary-color 变量用于 a 元素的颜色属性，并使用 darken 函数来在悬停时将颜色变暗。
嵌套
嵌套是 SASS 中另一个常用的功能。它允许开发者将相关的样式规则组合在一起，并以更具可读性和可维护性的方式编写样式表。
例如，假设我们有以下 HTML 代码：
<div class="card">
<img src="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>我们可以使用 SASS 将其样式化：
-- -------------------- ---- -------
----- -
------ -----
-------- -----
--------------- -------
---------- -
-------- -----
-- -
---------- --------
-------------- -------
-
- -
-------------- -----
-
---- -
-------- -------------
-------- ------ -----
---------- -----
------------ ----
------------ ----
----------- -------
------------ -------
--------------- -------
----------------- ---------------
------- --- ----- ---------------
------- -
----------------- ---------------------- -----
------------- ---------------------- -----
-
-
-
-在上面的代码中，我们使用嵌套将 .card-body、h5、p 和 .btn 的样式组合在一起，以更清晰和易于维护的方式编写样式表。
混合
混合是 SASS 中另一个常用的功能。它允许开发者创建可重复使用的样式规则集，以便在样式表中多次使用。
例如，假设我们有以下样式规则：
-- -------------------- ---- ------- ------ - ------ -------- ----------------- -------- ------------- -------- - -------------- - ------ -------- ----------------- -------- ------------- -------- - ------------- - ------ -------- ----------------- -------- ------------- -------- -
我们可以使用 SASS 的混合功能将其重构：
-- -------------------- ---- ------- ------ ------------- ------------------ -------------- - ------ ------- ----------------- ------------------ ------------- -------------- - ------ - -------- -------------- -------- --------- - -------------- - -------- -------------- -------- --------- - ------------- - -------- -------------- -------- --------- -
在上面的代码中，我们使用了 @mixin 和 @include 来创建和使用混合。我们可以将需要重复使用的样式规则集合并到一个混合中，然后在需要使用这些样式规则时，使用 @include 来调用该混合。
总结
SASS 是一种 CSS 预处理器，它允许开发者使用变量、嵌套、混合等功能来编写更加优雅和易于维护的 CSS 代码。本文介绍了 SASS 的基础知识，包括变量、嵌套、混合等概念的讲解和示例代码。通过使用 SASS，我们可以更加高效地编写 CSS 样式表，并且可以减少代码的冗余和维护成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c977aeadd4f0e0ff342dbe