Sass(Syntactically Awesome StyleSheets)是css的一个扩展开发工具，它允许你使用变量、条件语句等，使开发更简单可维护。
变量用于存储一些信息，它可以重复使用。
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;
}
原创文章，作者：晴川运维，如若转载，请注明出处：https://baike.qcidc.com/7780.html
