Sass设置变量

什么是sass呢？

Sass是一种CSS预处理器。它在现有CSS语法的基础上增加了一些额外的功能，例如：变量、嵌套、Mixin、函数等等。这些扩展使得编写样式更加高效、易于维护，有助于减少代码的重复。

设置变量

在sass中，变量用来存储可重复使用的值，例如，颜色、字体、边框等等。在使用变量前，需要先定义变量，如下所示：

$primary-color: #007bff;

上面的代码定义了一个名为$primary-color的变量，并将其值设置为蓝色(#007bff)。变量名前面需要添加$符号，以表示这是一个变量。

之后，可以在CSS规则中使用这个变量：

a {
  color: $primary-color;
  text-decoration: none;
  &:hover {
    color: darken($primary-color, 10%);
  }
}

在上面的例子中，我们将$primary-color变量的值赋给a标签的color属性，并且在鼠标悬停时使用了一个名为darken的函数来降低变量的亮度。

设置默认值

有时候，变量可能会根据不同的条件进行修改，但是如果没有为变量指定初始值，那么在使用变量时会出现错误。这时可以使用!default关键字来为变量指定默认值，如下所示：

$primary-color: #007bff !default;

这里的!default表示如果该变量已经被定义了，那么就不需要再次定义。如果没有被定义，则将其值设置为#007bff。

总结

Sass的变量功能可以提高编写样式的效率，并且能够使代码更加易于维护。在使用变量时，需要注意变量的命名规范，并且需要为变量指定默认值，以防止在使用变量时出现错误。