Sass 教程
Sass 变量
变量是一种存储信息的方式，您可以在以后重复使用它。
通过 Sass，您可以将信息存储在变量中，例如：
- 字符串
- 数字
- 颜色
- 布尔值
- 列表
- null
Sass 使用 $ 符号后跟名称来声明变量：
Sass 变量语法：
$variablename: value;
下面的例子声明了 4 个变量：
myFontmyColormyFontSizemyWidth
声明变量后，您可以在任意位置使用这些变量：
SCSS 语法：
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
因此，当 Sass 文件被转译时，它会使用变量（myFont、myColor 等），并输出普通 CSS 和放置在 CSS 中的变量值，如下：
CSS 输出：
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Sass 变量范围
Sass 变量仅在定义它们的嵌套级别上可用。
请看下面的例子：
SCSS 语法：
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
<p> 标签内的文本颜色是红色还是绿色？是红的！
另一个定义，$myColor: green; 位于 <h1> 规则内，并且只在那里可用！
所以，CSS 输出将是：
CSS 输出：
h1 {
color: green;
}
p {
color: red;
}
好的，这是变量作用域的默认行为。
使用 Sass !global
可以使用 !global 开关覆盖变量作用域的默认行为。
!global 指示变量是全局的，这意味着它可以在所有级别上被访问。
请看下面的例子（与上面相同，但添加了 !global）：
SCSS 语法：
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
现在 <p> 标签内的文本颜色将是绿色！
所以，CSS 输出将是：
CSS 输出：
h1 {
color: green;
}
p {
color: green;
}
提示：应该在任何规则之外定义全局变量。明智的做法是在其自己的文件中定义所有全局变量，名为 "_globals.scss"，并使用 @include 关键字包含该文件。
相关视频
24小时阅读榜
精品课程
独孤九贱(2)_CSS视频教程
共22课时
24.3万人学习
独孤九贱(3)_JavaScript视频教程
共28课时
36.2万人学习
独孤九贱(4)_PHP视频教程
共89课时
133.1万人学习
热门下载
phpStudy 2018最新版
集成PHP7，16种组合，超全大合集
下载
vc9-vc14（32+64位）运行库合集（链接在下方）
phpStudy安装所需运行库集合下载
下载
php程序员工具箱完整版
程序员工具箱 v1.0 php集成环境
下载
SublimeText3汉化版
中文版，非常好用
下载
Notepad++ Windows版
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
phpStudy V8.1（Win64位）（已支持php8）
Win64位，支持php多版本共存
下载