Sass 变量的声明与使用

本节咱们学习 Sass 中的变量，那么什么是变量呢？ 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 选择器访问啦。