Sass学习之路(5)——变量

来源：互联网发布：巨人网络集团编辑：程序博客网时间：2024/05/16 18:18

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;}

可以看出在选择器内部定义的局部变量优先级更高。

1 0