Sass 变量-SASS零基础入门

当前位置:　首页>> 技术小册>> SASS零基础入门

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

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

- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
- Sass 变量使用 $ 符号：

#### $variablename: value;
以下实例设置了四个变量：myFont, myColor, myFontSize, 和 myWidth。

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

Sass 代码：
```bash
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}
```
将以上代码转换为 CSS 代码，如下所示：

Css 代码：
```bash
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}
```
####Sass 作用域
Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。

Sass 代码：
```bash
$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}
```
将以上代码转换为 CSS 代码，如下所示：

Css 代码：
```
h1 {
  color: green;
}

p {
  color: red;
}
```

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

Sass 代码
```bash
$myColor: red;

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

p {
  color: $myColor;
}
```
现在 p 标签的样式就会变成 green。

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

Css 代码
```bash
h1 {
  color: green;
}

p {
  color: green;
}
```
注意：所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。

暂无相关推荐.