1.定义变量:
Sass中定义变量的关键字是'$'(毕竟程序员缺钱),并使用冒号(:)进行赋值,例如:
- $width:200px;//定义了一个名为width的变量,值为200px
2.普通变量和默认变量:
普通变量便是我们在大括号外用上面的方式声明的变量,可全局使用。
默认变量需要在声明的变量后加上 !default,如下:
- $lineHeight:1.5 !default;
默认变量可以理解为给变量一个初始值,在被使用到时,如果该变量没有值,则使用这个默认值。在默认变量前或后定义普通变量,都会覆盖掉默认变量的值。
- $lineHeight:2;
- $lineHeight:1.5 !default;
- .line{
- line-height:$lineHeight;
- }
- //结果就是:
- .line{
- line-height:2;
- }
其实也可以把默认变量理解成最低优先级的变量,优先级顺序:!default<普通变量<!important
3.局部变量和全局变量
全局变量:在选择器、函数、混合宏等外面定义的变量。
局部变量:其实就是上边的内容,反过来啦。
这里我们来看一个例子:
- //SCSS
- $color: orange !default;//定义全局变量
- .block {
- color: $color;//调用全局变量
- }
- em {
- $color: red;//定义局部变量
- a {
- color: $color;//调用局部变量
- }
- }
- span {
- color: $color;//调用全局变量
- }
编译出来的结果如下:
- //CSS
- .block {
- color: orange;
- }
- em a {
- color: red;
- }
- span {
- color: orange;
- }
可以看出在选择器内部定义的局部变量优先级更高。