Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近,规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量,则局部变量覆盖全局变量。从 Sass 3.4 版本开始,Sass 已经可以正确处理作用域的概念,并通过创建一个新的局部变量来代替。
本部分讨论下**全局变量的影子**。当在局部范围内(选择器内、函数内、混合宏内……)声明一个已经存在于全局范围内的变量时,局部变量就成为了全局变量的_影子_。基本上,局部变量只会在局部范围内覆盖全局变量。
以下代码片可以解析**变量影子**的概念。
~~~
// Initialize a global variable at root level.
$variable: 'initial value';
// Create a mixin that overrides that global variable.
@mixin global-variable-overriding {
$variable: 'mixin value' !global;
}
.local-scope::before {
// Create a local variable that shadows the global one.
$variable: 'local value';
// Include the mixin: it overrides the global variable.
@include global-variable-overriding;
// Print the variable’s value.
// It is the **local** one, since it shadows the global one.
content: $variable;
}
// Print the variable in another selector that does no shadowing.
// It is the **global** one, as expected.
.other-local-scope::before {
content: $variable;
}
~~~
- 关于作者
- 贡献
- 关于Sass
- Ruby Sass Or LibSass
- Sass Or SCSS
- 其他预编译器
- 简介
- 为什么需要一个样式指南
- 免责声明
- 核心原则
- 语法格式
- 字符串
- 数字
- 颜色
- 列表
- Maps
- CSS规则集
- 声明顺序
- 选择器嵌套
- 命名约定
- 常量
- 命名空间
- 注释
- 标示注释
- 文档
- 结构
- 组件
- 7-1模式
- Shame文件
- 响应式设计和断点
- 命名断点
- 断点管理器
- 媒体查询用法
- 变量
- 作用域
- !default标识符
- !global标识符
- 多变量或maps
- 扩展
- 混合宏
- 基础
- 参数列表
- 混合宏和浏览器前缀
- 条件语句
- 循环
- Each
- For
- While
- 警告和错误
- 警告
- 错误
- 工具
- Compass
- 栅格系统
- SCSS-Lint
- 总结概要