sass 变量——迹忆客-ag捕鱼王app官网

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

sass 变量可以存储以下信息：

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

sass 变量使用 $ 符号：

$variablename: value;

以下实例设置了四个变量：myfont, mycolor, myfontsize, 和 mywidth。

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

sass 代码：

$myfont: helvetica, sans-serif;
$mycolor: red;
$myfontsize: 18px;
$mywidth: 680px;
body {
  font-family: $myfont;
  font-size: $myfontsize;
  color: $mycolor;
}
#container {
  width: $mywidth;
}

将以上代码转换为 css 代码，如下所示：

css 代码：
body {
  font-family: helvetica, sans-serif;
  font-size: 18px;
  color: 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 来包含该文件。