SASS 中变量的默认值
字数:404,预计阅读时间:2min
SASS 中定义的变量,后设置的值会覆盖旧的值。 $color: red;
$color: blue;
编译后为: .btn {
color: blue; } 如果你编写了一个 UI 库提供 SASS 文件,可能会提供一些参数供用户使用时自定义。而在 SASS 组件内部,我们需要应用上用户设置的这些值。但是如果使用者没有自定义变量的值,那这些变量应该有自己的默认值。 利用前面提到的覆盖机制是不能实现的。因为无论是你在 @import UI 库之前设置还是之后,都不能影响这个导入文件中的值。如果你设置的值在导入之前,那么 UI 库中的变量因为在后面,所以你的设置会被覆盖而不起作用;如果你的设置在导入之后,那更加不起作用了。 假设这是 UI 中的样式文件: _lib.scss $color: red;
.btn {
color: $color;
} 在另一个文件中使用,并且试图自定义变量的值: page.scss @import 'lib';
$color: blue; 或: page.scss $color: blue;
@import 'lib'; 两者编译结果均为: .btn {
color: red; }
|

【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步