Sass参考手册
Sass 变量
Sass 变量
Sass 变量
变量用于存储一些信息,它可以重复使用。
Sass 变量可以存储以下信息:
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
Sass 变量使用 $ 符号:
$variablename: value;
以下实例设置了四个变量:myFont, myColor, myFontSize, 和 myWidth。
变量声明后我们就可以在代码中使用它:
Sass 代码:
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
将以上代码转换为 CSS 代码,如下所示:
Css 代码:
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Sass 作用域
Sass 变量的作用域只能在当前的层级上有效果,如下所示 h1 的样式为它内部定义的 green,p 标签则是为 red。
Sass 代码:
h1 {
$myColor: green; // 只在 h1 里头有用,局部作用域
color: $myColor;
}
p {
color: $myColor;
}
将以上代码转换为 CSS 代码,如下所示:
Css 代码:
color: green;
}
p {
color: red;
}
!global
当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的:
Sass 代码
h1 {
$myColor: green !global; // 全局作用域
color: $myColor;
}
p {
color: $myColor;
}
现在 p 标签的样式就会变成 green。
将以上代码转换为 CSS 代码,如下所示:
Css 代码
color: green;
}
p {
color: green;
}
注意:所有的全局变量我们一般定义在同一个文件,如:_globals.scss,然后我们使用 @include 来包含该文件。
Sass 变量 |
---|
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
主页 | http://sass-lang.com/ |
源码 | https://github.com/sass/sass |
发布版本 | 3.5.3 |