sass变量
Sass 变量
变量用于存储一些信息,它可以重复使用。
Sass 变量可以存储以下信息:
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
Sass 变量使用 $ 符号:
$variablename: value;
示例
$myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; }
以上代码会在监听的另一个文件夹中显示
Css 代码: body { font-family: Helvetica, sans-serif; font-size: 18px; color: red; } #container { width: 680px; }
Sass 作用域
Sass 变量的作用域只能在当前的层级上有效果,如下所示 h1 的样式为它内部定义的 green,p 标签则是为 red。
$myColor: red; h1 { $myColor: green; // 只在 h1 里头有用,局部作用域 color: $myColor; } p { color: $myColor; } 将以上代码转换为 CSS 代码,如下所示: Css 代码: h1 { color: green; } p { color: red; }
和js等语言一样,代码块的表示都是花括号,以花括号为分界线,区分局部变量与全局变量
!global
当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的,这是处理以位置来区分变量的作用域的另一种全局变量的书写方式
$myColor: red; h1 { $myColor: green !global; // 全局作用域 color: $myColor; } p { color: $myColor; }
滴水穿石,非一日之功