SASS 是一款流行的 CSS 预处理器，它可以让我们更方便地编写和维护 CSS 代码。在 SASS 中，我们可以使用变量、混合器、函数等功能来定义样式，其中包括颜色、单位、字体、尺寸及字重等。
颜色定义方法
在 SASS 中，我们可以使用变量来存储颜色值，方便我们在多处使用同一种颜色。下面是一个例子：
$primary-color: #007bff;
.button {
background-color: $primary-color;
color: #fff;
}在上面的代码中，我们定义了一个名为 $primary-color 的变量，它存储了蓝色的颜色值。然后，我们在 .button 类中使用了这个变量来设置背景颜色。
除了使用变量，SASS 还支持使用颜色函数来操作颜色。比如，我们可以使用 darken() 函数来使颜色变暗：
$primary-color: #007bff;
.button {
background-color: darken($primary-color, 10%);
color: #fff;
}在上面的代码中，我们使用了 darken() 函数将 $primary-color 变暗了 10%。
单位定义方法
在 SASS 中，我们可以使用变量来存储单位值，方便我们在多处使用同一种单位。下面是一个例子：
-- -------------------- ---- ------- ---------------- ----- ---- - ---------- ---------------- - -- - ---------- --------------- - -- -
在上面的代码中，我们定义了一个名为 $base-font-size 的变量，它存储了基准字体大小。然后，我们在 body 和 h1 中使用了这个变量来设置字体大小。
除了使用变量，SASS 还支持使用单位函数来转换单位。比如，我们可以使用 rem() 函数将像素转换为 rem：
-- -------------------- ---- ------- ---------------- ----- ---- - ---------- ---------------- - -- - ---------- --------------- - -- -------------- ----- -
在上面的代码中，我们使用了 rem() 函数将 1px 转换为 0.0625rem。
字体定义方法
在 SASS 中，我们可以使用变量来存储字体系列和字体样式，方便我们在多处使用同一种字体。下面是一个例子：
-- -------------------- ---- ------- ------------------ ---------- ------ ---------- ------ ----------- ------------------ ---- ---- - ------------ ------------------ ------------ ------------------ - -- - ------------ ------------------ ------------ ----- -
在上面的代码中，我们定义了两个变量，分别存储了字体系列和字体样式。然后，我们在 body 和 h1 中使用了这些变量来设置字体。
尺寸定义方法
在 SASS 中，我们可以使用变量来存储尺寸值，方便我们在多处使用同一种尺寸。下面是一个例子：
-- -------------------- ---- ------- -------------- ----- ---------- - -------- -------------- - ----- - ------- -------------- -
在上面的代码中，我们定义了一个名为 $base-spacing 的变量，它存储了基准间距大小。然后，我们在 .container 和 .card 中使用了这个变量来设置内边距和外边距。
字重定义方法
在 SASS 中，我们可以使用变量来存储字重值，方便我们在多处使用同一种字重。下面是一个例子：
-- -------------------- ---- ------- ------------------ ---- -- - ------------ ------------------ - -- - ------------ ----------------- - ---- -
在上面的代码中，我们定义了一个名为 $base-font-weight 的变量，它存储了基准字重大小。然后，我们在 h1 和 h2 中使用了这个变量来设置字重。
总结
在 SASS 中，我们可以使用变量、函数等功能来定义样式，包括颜色、单位、字体、尺寸及字重等。这些功能可以让我们更方便地编写和维护 CSS 代码。希望本文对你有所帮助，让你更好地掌握 SASS 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e01b1c1886fbafa4d53ab4