Sass 是一种成熟的、稳定且强大的专业级 CSS 扩展语言。它提供了诸如变量、嵌套规则、混合、选择器继承等特性，使得样式表更加简洁、可维护和可扩展。
Sass 变量
变量是 Sass 中最基础也是最重要的特性之一。变量允许你存储一个值，然后在需要的地方引用它。这不仅使你的代码更简洁，也更容易进行全局修改。例如：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}在这个例子中，我们定义了两个变量：$font-stack 和 $primary-color。这些变量可以在整个样式表中重复使用，从而避免了硬编码带来的问题。
嵌套规则
Sass 允许你将选择器嵌套在彼此内部，这使得代码更加清晰和有组织。例如：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-
-- - -------- ------------- -
- -
-------- ------
-------- --- -----
---------------- -----
-
-上面的代码片段展示了如何使用嵌套规则来表示导航栏的样式。这种嵌套方式不仅让代码看起来更有层次感，而且当选择器层级较多时，还可以帮助你更好地理解每个部分的作用。
混合与继承
混合
混合允许你定义一组 CSS 属性，然后在整个样式表中多次引用它们。这有助于避免重复代码，提高代码复用率。例如：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }在这个例子中，我们定义了一个名为 border-radius 的混合，它可以接受一个参数 $radius。然后，我们在 .box 类中调用了这个混合，并传入了具体的半径值。
继承
继承允许子选择器继承父选择器的样式。这可以减少代码冗余，使样式表更加整洁。例如：
-- -------------------- ---- ------- --------------- - ------- --- ----- ----- -------- ----- ------ ----- - -------- - ------- ---------------- ------------- ------ - ------ - ------- ---------------- ------------- ---- -
在这个例子中，我们定义了一个名为 %message-shared 的占位符选择器，并为其设置了共享的样式。然后，我们在 .success 和 .error 选择器中分别扩展了这个占位符选择器，并添加了各自的特定样式。
以上便是 Sass 的一些基本概念和用法。掌握了这些基础知识后，你就可以开始使用 Sass 来编写更加高效、可维护的样式表了。