变量可以让整个网站保持一致性。你可以定义一个变量，然后在其他地方引用它，而不必再重复相同的值。要改这些值，只需在定义变量的那一个地方修改。
下面的Sass代码包含两个变量：$primary-color，$secondary-color
$primary-color: orange;
$secondary-color: gold;
body {
color: $primary-color;
background: $secondary-color;
}
变量就像存储值的容器。在本例中，我们将值orange、gold存储在变量中。
每次需要使用orange颜色时，可以使用变量名来代替orange颜色。如果需要改一个颜色，只需在定义变量的那一个地方修改。
变量定义
- 变量以美元符号($)开头，后面跟变量名。
- 变量名和赋值之间用冒号(:)分隔。
注意：缩进语法、SCSS语法中，变量定义都是一样的。
连字符和下划线
变量名中连字符和下划线等效，$primary_color 与 $primary-color是同一个变量。
下面的代码可以正常工作:
$primary_color: orange;
$secondary_color: gold;
body {
color: $primary-color;
background: $secondary-color;
}
局部变量
选择器中定义的变量是局部变量，作用范围是该选择器
示例：
header {
$header-color: orange;
color: $header-color;
}
不能在选择器外面使用局部变量，下面的做法是错误的:
header {
$header-color: orange;
color: $header-color;
}
article {
color: $header-color;
}
如果编译该代码，会报错: error: Undefined variable: "$header-color"。
!global 标志定义全局变量
可以在选择器中使用 !global 标志定义全局变量。
示例：
header {
$header-color: orange !global;
color: $header-color;
}
article {
color: $header-color;
}
$header-color使用了全局变量标志，被定义为全局变量，外部就可以使用该变量。这段代码会编译成以下CSS:
header {
color: orange; }
article {
color: orange; }
变量值
变量值除了前面举例的颜色外，可以是任何css值，如字体族、字体权重、边框宽度、背景图像等
多种值类型示例：
$primary-color: orange;
$secondary-color: gold;
$font-stack: 'Open Sans', Helvetica, Sans-Serif;
$border-thick: 10px;
$border-bright: orange;
$border-style: solid;
$article-width: 60%;
$article-padding: 20px;
$article-margin: auto;
body {
color: $primary-color;
background: $secondary-color;
font-family: $font-stack;
}
article {
border: $border-thick $border-style $border-bright;
width: $article-width;
padding: $article-padding;
margin: $article-margin;
}
上面的代码编译输出的CSS:
body {
color: orange;
background: gold;
font-family: "Open Sans", Helvetica, Sans-Serif; }
article {
border: 10px solid orange;
width: 60%;
padding: 20px;
margin: auto; }
/*# sourceMappingURL=styles.css.map */
默认值
变量可以设置默认值。当变量没有赋值时会使用默认值。
默认值使用!default标志设置。
示例：
$primary-color: orange;
$primary-color: gold !default;
body {
color: $primary-color;
}
编译输出的CSS如下:
body {
color: orange; }
本例中没有使用默认值，因为该变量有赋值：$primary-color: orange;。
如果去掉赋值，就会使用默认值。如下所示：
$primary-color: gold !default;
body {
color: $primary-color;
}
编译后的CSS如下所示:
body {
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))
