什么是变量呢? Sass 中的变量能够用来存储一些信息,并且重复使用。变量能够存储的信息包含字符串、数字、布尔值、色彩值等等。

申明变量

Sass 中申明变量须要用到 $ 符号,格局为:

$变量名: 变量值;
示例:

例如上面咱们定义一个变量,并给这个变量赋了一个色彩值:

$color:red;.xkd{    color: $color;    a{        background-color: $color;    }}

执行编译命令,编译后的 CSS 代码如下所示:

.xkd {  color: red;}.xkd a {  background-color: red;}

定义好变量后,在须要应用到 red 色彩时,就能够间接应用变量名来代替这个色彩值。当然,当初这样看咱们还是不太分明为什么要应用变量,没有看出变量的劣势。然而如果咱们在一个大型项目中,定义变量会很有用,例如咱们可能会在多个中央应用同一个色彩值,如果前期须要对这个色彩值进行批改,那么一个一个去找会很麻烦,而如果定义了变量,就只须要批改变量的值即可。

默认变量

Sass 的默认变量须要在值的前面加上 !default 。默认变量个别用来设置默认值,也就是说当某个变量定义了一个默认值,然而又呈现另外一个值时,无论谁先被定义,默认值都会被笼罩。

示例:

看上面这段代码:

$fsize: 14px;.xkd{    $fsize: 12px!default;    font-size: $fsize;}

编译成 CSS 代码后:

.xkd {  font-size: 14px;}

上述代码中,咱们先定义了一个全局变量 $fsize 并赋值为 14px ,而后在 .xkd 选择器中给 $fsize 变量赋了一个 12px 的值,按理来说会优先应用 12px,然而因为在 12px 前面加了一个 !default,变成了一个默认值,最初输入的 CSS 代码中,应用的是 14px

变量的作用域

Sass 中反对两种类型的变量,即局部变量和全局变量。默认状况下定义在选择器之外的为全局变量,全局变量的作用域为全局,能够被所有的选择器拜访。定义在选择器内的为局部变量,局部变量的作用域只能在以后层级上有成果。上面咱们通过一个例子来看一下局部变量和全局变量的应用。

示例:
$color: #ccc;  // 全局变量.one{    $color: #eee;  // 局部变量    background-color: $color;}.two{    background-color: $color;}

编译成 CSS 代码:

.one {  background-color: #eee;}.two {  background-color: #ccc;}

上述代码中,能够看到咱们定义了一个全局变量 $color,而后又在 .one 中定义了一个局部变量 $color。此时.one.two 同时援用 $color ,编译成 CSS 代码后,.one 中应用的是局部变量的值,而 .two 中应用的是全局变量的值。

能够看出,局部变量的作用域就只在申明这个变量的以后代码块中,而全局变量的作用域则在全局。当应用了某个变量时,首先会在以后代码块中查找,如果找不到则向上一层代码块中查找,始终到找到为止。

!global 关键字

咱们能够通过关键字 !global 来设置全局变量,也就是说咱们只有在一个变量前面应用这个关键字,那么这个变量就为全局变量。

示例:

咱们来看一个例子:

.one{    $num: 14px !global;      font-size: $num;}.two{    font-size: $num;}

编译成 CSS 代码:

.one {  font-size: 14px;}.two {  font-size: 14px;}

在上述代码中,本来在.two 选择器中是不能拜访 .one 选择器中的变量的,然而因为变量 $num 应用了 !global 关键字,所以 $num 变成了一个全局变量,这样就能够 .two 选择器拜访啦。