快速学sass(四)---变量

变量

sass的变量我们都知道如何定义了吧，使用$+变量名：变量值

普通变量

定义之后可以在全局范围内使用。

$fontSize: 16px;
body{
font-size:$fontSize;
}

编译后的css代码：

body{
font-size:16px;
}

默认变量

sass 的默认变量仅需要在值后面加上 !default 。

$baseLineHeight:2em !default;
body{
line-height: $baseLineHeight;
}

编译后的css代码：

body{
line-height:2em;
}

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

$baseLineHeight: 2em;
$baseLineHeight: 1.5em !default;
body{
line-height: $baseLineHeight;
}

编译后的css代码：

body{
line-height:2em;
}

全局变量和局部变量

Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近，规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。

全局变量与局部变量

全局变量：在选择器、函数、混合宏…的外面定义的变量为全局变量

先来看一下代码例子：

//SCSS

$color: orange !default;//定义全局变量
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}

css 的结果：

//CSS

.block {
color: orange;
}
em a {
color: red;
}
span {
color: orange;
}

上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码：

$color:orange !default;

$color

就是一个全局变量，而定义在元素内部的变量，比如

$color:red;

是一个局部变量。

除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。

全局变量的影子

当在局部范围（选择器内、函数内、混合宏内…）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。

//SCSS

$color: orange !default;//定义全局变量
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量（全局变量 $color 的影子）
a {
color: $color;//调用局部变量
}
}

什么时候声明变量？

我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：

该值至少重复出现了两次；
该值至少可能会被更新一次；
该值所有的表现都与变量有关（非巧合）。
基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。