Sass

变量可以让整个网站保持一致性。你可以定义一个变量，然后在其他地方引用它，而不必再重复相同的值。要改这些值，只需在定义变量的那一个地方修改。

下面的Sass代码包含两个变量：$primary-color，$secondary-color

1$primary-color: orange;
2$secondary-color: gold;
3
4body {
5  color: $primary-color;
6  background: $secondary-color;
7}

变量就像存储值的容器。在本例中，我们将值orange、gold存储在变量中。

每次需要使用orange颜色时，可以使用变量名来代替orange颜色。如果需要改一个颜色，只需在定义变量的那一个地方修改。

变量定义

变量以美元符号($)开头，后面跟变量名。
变量名和赋值之间用冒号(:)分隔。

注意：缩进语法、SCSS语法中，变量定义都是一样的。

连字符和下划线

变量名中连字符和下划线等效，$primary_color 与 $primary-color是同一个变量。

下面的代码可以正常工作:

1$primary_color: orange;
2$secondary_color: gold;
3
4body {
5    color: $primary-color;
6    background: $secondary-color;
7}

局部变量

选择器中定义的变量是局部变量，作用范围是该选择器

示例：

1header {
2    $header-color: orange;
3    color: $header-color;
4}

不能在选择器外面使用局部变量，下面的做法是错误的:

1header {
2    $header-color: orange;
3    color: $header-color;
4}
5article {
6    color: $header-color;
7}

如果编译该代码，会报错: error: Undefined variable: "$header-color"。

!global 标志定义全局变量

可以在选择器中使用 !global 标志定义全局变量。

示例：

1header {
2    $header-color: orange !global;
3    color: $header-color;
4}
5article {
6    color: $header-color;
7}

$header-color使用了全局变量标志，被定义为全局变量，外部就可以使用该变量。这段代码会编译成以下CSS:

1header {
2    color: orange; }
3
4article {
5    color: orange; }

变量值

变量值除了前面举例的颜色外，可以是任何css值，如字体族、字体权重、边框宽度、背景图像等

多种值类型示例：

1$primary-color: orange;
2$secondary-color: gold;
3$font-stack: 'Open Sans', Helvetica, Sans-Serif;
4$border-thick: 10px;
5$border-bright: orange;
6$border-style: solid;
7$article-width: 60%;
8$article-padding: 20px;
9$article-margin: auto;
10
11body {
12    color: $primary-color;
13    background: $secondary-color;
14    font-family: $font-stack;
15}
16article {
17    border: $border-thick $border-style $border-bright;
18    width: $article-width;
19    padding: $article-padding;
20    margin: $article-margin;
21}

上面的代码编译输出的CSS:

1body {
2  color: orange;
3  background: gold;
4  font-family: "Open Sans", Helvetica, Sans-Serif; }
5
6article {
7  border: 10px solid orange;
8  width: 60%;
9  padding: 20px;
10  margin: auto; }
11
12/*# sourceMappingURL=styles.css.map */

默认值

变量可以设置默认值。当变量没有赋值时会使用默认值。

默认值使用!default标志设置。

示例：

1$primary-color: orange;
2$primary-color: gold !default;
3
4body {
5  color: $primary-color;
6}

编译输出的CSS如下:

1body {
2  color: orange; }

本例中没有使用默认值，因为该变量有赋值：$primary-color: orange;。

如果去掉赋值，就会使用默认值。如下所示：

1$primary-color: gold !default;
2
3body {
4  color: $primary-color;
5}

编译后的CSS如下所示:

1body {
2  color: gold; }

变量数据类型

SASS有七种主要数据类型:

Numbers (e.g. 15, 3.5, 50px)
Strings 可带可不带引号 (e.g. "foo", 'foo', foo)
Colors (e.g. orange, #ffcc00, rgba(105, 255, 0, 0.7))
Booleans (e.g. true, false)
Nulls (e.g. null)
Lists 空格或逗号分隔 (e.g. 2.5px 10px 0 7px, Helvetica, Arial, sans-serif)
Maps (e.g. (key1: value1, key2: value2))