什么是 SASS
SASS（Syntactically Awesome StyleSheets）是一种 CSS 预处理器，它可以让 CSS 更具可读性和可维护性。SASS 基于 CSS3，并添加了许多新的特性和功能，如嵌套、变量、函数和混合等。使用 SASS 可以让我们更快地编写风格表，并使其更具灵活性和可读性。
安装 SASS
在开始使用 SASS 之前，需要先安装 SASS。SASS 可以通过 RubyGems 安装。安装 SASS 的步骤如下：
在终端上运行
gem install sass命令，安装 SASS。检查是否安装成功，运行
sass --version命令，查看安装的版本。
使用 SASS
变量
变量是 SASS 中的一项强大功能。使用变量可以让我们在 CSS 中定义一个值，并在整个样式表中重复使用它。在 SASS 中声明变量需要加上 $ 符号，如下所示：
// 定义变量 $primary-color: #6c757d; // 使用变量 body { background-color: $primary-color; }
嵌套
使用嵌套可以让我们更直观地组织 CSS 样式，且可以减少样式层级的嵌套，使样式表更易于阅读和维护。例如：
-- -------------------- ---- ------- -- ----- --- - ----------- ----- - --- -- - ----------- ----- - --- -- -- - -------- ------------- - -- ---- --- - ----------- ----- -- - ----------- ----- -- - -------- ------------- - - -展开代码
混合
混合是一种将一组 CSS 属性集合封装到一个单一的代码块中的方法。这个 CSS 代码块可以在整个样式表中重复使用。SASS 使用 @mixin 关键字来声明混合体，使用 @include 关键字来引入混合体，例如：
-- -------------------- ---- ------- -- ----- ------ ---------- - ------------------- ----------- ---------------- ----------- ----------- ----------- - -- ----- ---------- - -------- ----------- ------- - ----- ------ ------ -展开代码
函数
函数是一种将一个或多个参数转换为一个返回值的方法。在 SASS 中，函数可以用来处理颜色、数字、字符串、列表等数据类型。例如：
-- -------------------- ---- ------- -- ---- --------- ---------------------------- - ---------------- ----- ------- ---------- - ---------------- - ----- - -- ---- ---------- - ---------- ------------------------ -展开代码
继承
继承是一种将样式从一个选择器继承到另一个选择器的方法。在 SASS 中，使用 @extend 关键字来实现继承。例如：
-- -------------------- ---- ------- -- ------ -------- - -------- ----- - -- ---- -------- - ------- --------- ----------------- ------ - ------ - ------- --------- ----------------- ---- -展开代码
示例
以下是一个使用 SASS 编写的简单样式表示例：
-- -------------------- ---- ------- --------------- -------- ------ ------ - -------- ----- ---------------- ------- ------------ ------- - ---- - ----------------- --------------- - ---------- - -------- ------- -------- ----------- ------- - ----- ------ ------ - --- - -- - ----------- ----- -- - -------- ------------- - - ------ ------ ---------------- ----- -------- ---- ------- - ----------------- ---------------------- ----- - - - - -展开代码
以上示例中，定义了一个 $primary-color 变量，定义了一个 @mixin center 混合体，其中包括 display、justify-content 和 align-items 属性。在 .container 类选择器中使用了 @include center 和 @include box-sizing 指令引入了混合体。在 nav 元素的选择器中通过嵌套选择器定义了其内部的样式，其中包括 hover 状态的样式，使用 darken 函数来处理颜色值。
使用 SASS 可以让页面 UI 设计更高效、灵活和易于维护。通过上述的示例，希望读者可以了解到 SASS 的一些基础功能和用法，并应用到实际的前端开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb1511306f20b3a6a63331
