Sass学习之路——变量

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass学习之路——变量相关的知识,希望对你有一定的参考价值。

1.定义变量:
Sass中定义变量的关键字是‘$‘(毕竟程序员缺钱),并使用冒号(:)进行赋值,例如:

  1. $width:200px;//定义了一个名为width的变量,值为200px  

 

2.普通变量和默认变量:

普通变量便是我们在大括号外用上面的方式声明的变量,可全局使用。

默认变量需要在声明的变量后加上  !default,如下:

  1. $lineHeight:1.5 !default;  

默认变量可以理解为给变量一个初始值,在被使用到时,如果该变量没有值,则使用这个默认值。在默认变量前或后定义普通变量,都会覆盖掉默认变量的值。

  1. $lineHeight:2;  
  2. $lineHeight:1.5 !default;  
  3. .line{  
  4. line-height:$lineHeight;  
  5. }  
  6. //结果就是:  
  7. .line{  
  8. line-height:2;  
  9. }  

其实也可以把默认变量理解成最低优先级的变量,优先级顺序:!default<普通变量<!important

3.局部变量和全局变量

全局变量:在选择器、函数、混合宏等外面定义的变量。

局部变量:其实就是上边的内容,反过来啦。

这里我们来看一个例子:

  1. //SCSS  
  2. $color: orange !default;//定义全局变量  
  3. .block {  
  4.   color: $color;//调用全局变量  
  5. }  
  6. em {  
  7.   $color: red;//定义局部变量  
  8.   a {  
  9.     color: $color;//调用局部变量  
  10.   }  
  11. }  
  12. span {  
  13.   color: $color;//调用全局变量  
  14. }  

编译出来的结果如下:

  1. //CSS  
  2. .block {  
  3.   color: orange;  
  4. }  
  5. em a {  
  6.   color: red;  
  7. }  
  8. span {  
  9.   color: orange;  
  10. }  

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

以上是关于Sass学习之路——变量的主要内容,如果未能解决你的问题,请参考以下文章

Sass学习之路——Sass简介

Sass学习之路——Sass环境安装(windows版)

前端学习之路之自适应设计(sass语法)

前端学习之路之自适应设计(sass语法)

H5前端学习之路第1天--css预处理器

Python学习之路——变量