在前端开发中，我们通常会用到 CSS 预处理器 SASS 来提高开发效率和维护性。在 SASS 中，你可能会遇到需要设置默认的字体大小的情况。本文将介绍如何在 SASS 中设置默认的字体大小，及其重要性和使用指南。
为什么需要设置字体大小的默认值？
在网页开发中，我们经常需要设置各种字体样式，而且在不同的页面和不同的元素中，字体大小的需求也不同。通常情况下，我们会在 CSS 中为每个需要设置字体大小的元素单独编写样式，比如：
h1 {
font-size: 36px;
}
p {
font-size: 16px;
}这样做的确可以实现每个元素的字体大小自定义，但如果我们的网页需要调整字体大小，就需要对每个元素的样式进行一遍重复的修改，非常麻烦。因此，我们可以考虑使用 SASS 定义一个默认值，使得我们只需要修改一处，就能够改变全站所有元素的字体大小。如：
-- -------------------- ---- ------- ---------------- ----- -- - ---------- --------------- - -- - - - ---------- ---------------- -
此时，我们只需要修改 $font-size-base 变量，就能够修改全站所有元素的字体大小。这样做不仅提高了维护性，而且更加方便全站字体大小的统一调整。
如何设置默认字体大小？
那么在 SASS 中，如何设置默认字体大小的变量呢？我们可以使用 $font-size-base 这个变量来设置默认字体大小：
$font-size-base: 14px !default;
在这个 $font-size-base 变量的声明中，我们使用了 !default 标识符，这个标识符的作用是保证 $font-size-base 变量只会在第一次声明时被设置，后续的声明会被忽略。这样在使用 $font-size-base 变量时，即使在声明之前没有设置，默认值也会被使用。如：
h1 {
font-size: $font-size-base * 2;
}
p {
font-size: $font-size-base;
}在这个例子中，如果 $font-size-base 变量在这段样式之前被设置了一个值，那么这个值会被 $font-size-base 的默认值所覆盖。如果没有设置，那么 $font-size-base 的值就是 14px。
SASS 中的其他字体大小变量
除了 $font-size-base 变量之外，SASS 还提供了其他的字体大小变量，包括：
$font-size-sm: 小号字体大小$font-size-md: 中号字体大小$font-size-lg: 大号字体大小
它们的默认值依赖于 $font-size-base 变量，比如：
$font-size-base: 14px; $font-size-sm: $font-size-base * 0.875; $font-size-md: $font-size-base; $font-size-lg: $font-size-base * 1.5;
这些变量在网页开发中非常实用，可以根据需要快速设置元素的字体大小，同时保持字体大小的一致性。
总结
在 SASS 中设置默认的字体大小可以提高网页开发的效率和维护性，并且方便全站字体大小的统一调整。在定义默认字体大小变量时，可以使用 !default 标识符保证默认值只会在第一次声明时被设置。除了 $font-size-base 变量之外，SASS 还提供了一些其他的字体大小变量，可以帮助我们更快捷地设置字体大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fb69248841e9894c12e97