面向工资编程,面向面试学习!

Sass 变量

变量用于存储一些信息,它可以重复使用。

Sass 变量可以存储以下信息:

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值

Sass 变量使用 $ 符号:

$variablename: value;

以下实例设置了四个变量:myFont, myColor, myFontSize, 和 myWidth。

变量声明后我们就可以在代码中使用它:

Sass 代码:

$myFont: Helvetica, sans-serif;$myColor: red;$myFontSize: 18px;$myWidth: 680px;
body font-family: $myFontfont-size: $myFontSizecolor: $myColor;}
#container width: $myWidth;}

将以上代码转换未 CSS 代码,如下所示:

Css 代码:

body font-family: Helvetica, sans-seriffont-size: 18pxcolor: red;}
#container width: 680px;}

Sass 作用域

Sass 变量的作用域只能在当前的层级上有效果,如下所示 h1 的样式为它内部定义的 green,p 标签则是为 red。

Sass 代码:

$myColor: red;
h1 $myColor: green;   // 只在 h1 里头有用,局部作用域  color: $myColor;}
p color: $myColor;}

将以上代码转换未 CSS 代码,如下所示:

Css 代码:

h1 color: green;}
p color: red;}

!global

当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的:

Sass 代码

$myColor: red;
h1 $myColor: green !global;  // 全局作用域  color: $myColor;}
p color: $myColor;}

现在 p 标签的样式就会变成 green。

将以上代码转换未 CSS 代码,如下所示:

Css 代码

h1 color: green;}
p color: green;}

注意:所有的全局变量我们一般定义在同一个文件,如:_globals.scss,然后我们使用 @include 来包含该文件。