本节我们学习 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
选择器访问啦。