【JS】Sass 变量的声明与使用
Sass 变量的声明与使用
知否发布于 今天 05:29
什么是变量呢? 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
选择器访问啦。
cssjavascriptsass
阅读 40发布于 今天 05:29
本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
知否
Skrike while the iron is hot.
129 声望
171 粉丝
知否
Skrike while the iron is hot.
129 声望
171 粉丝
宣传栏
目录
什么是变量呢? 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
选择器访问啦。
以上是 【JS】Sass 变量的声明与使用 的全部内容, 来源链接: www.h5w3.com/113369.html
得票时间