SASS 基础教程：如何正确使用变量

什么是 SASS

SASS 是一种 CSS 预处理器，它可以让我们使用变量、嵌套规则、Mixin、函数和循环等高级功能，让我们更加方便地编写和维护 CSS。

SASS 有两种语法，分别是 .sass 和 .scss，其中 .sass 是使用缩进的语法，而 .scss 像是 CSS 的超集，更加适合前端开发人员使用。

如何正确使用变量

在 SASS 中，使用 $ 符号来定义变量，比如：

$primary-color: #008CBA;

上面的代码定义了一个名为 $primary-color 的变量，其值为 #008CBA。这样我们就可以在后面的代码中使用这个变量了：

.nav {
  background-color: $primary-color;
}

.btn {
  color: $primary-color;
}

这样一来，两个选择器都使用了 $primary-color 这个变量，我们只需要在变量处修改颜色值，所有使用了该变量的处都会自动更新。

命名规范

变量的命名应该有一定的规范，以便于代码的维护和可读性。

一般来说，我们可以使用小写字母和连字符 - 来表示一个变量名。如果变量名由多个单词组成，可以采用以下方式：

$page-title-color: #333;

上面的代码中，使用连字符连接两个单词，同时每个单词都使用小写字母。这样可以更加清晰地表达变量的含义，也更方便记忆。

变量默认值

在 SASS 中，我们也可以为变量指定默认值。比如：

$bg-color: #fff !default;

上面的代码中，使用 !default 指定了变量 $bg-color 的默认值为 #fff。

如果后面的代码中没有为该变量赋值，那么它的值就是默认值。反之，如果为其赋值，则该值会覆盖默认值。

全局变量与局部变量

在 SASS 中，变量可以分为两种：全局变量和局部变量。

全局变量通常在文件的顶部定义，它可以在全局范围内使用：

$bg-color: #fff;

body {
  background-color: $bg-color;
}

上面的代码中，变量 $bg-color 是一个全局变量，可以在 body 选择器内部使用。

局部变量则是在一定范围内有效，通常是定义在选择器内部或者函数内部。

.btn {
  $font-size: 14px;
  font-size: $font-size;
}

上面的代码中，变量 $font-size 是一个局部变量，只在 .btn 选择器内部有效。

总结

SASS 可以更方便地编写和维护 CSS，其中变量是其中一个重要的功能。使用 $ 符号来定义变量，有一定的命名规范和默认值的设置，还有全局变量和局部变量的区分。

在实践中，应该尽量遵循命名规范，合理使用变量来提高代码的复用性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65192f0f95b1f8cacd1648ed