内容简介:SASS 中定义的变量,后设置的值会覆盖旧的值。编译后为:如果你编写了一个 UI 库提供 SASS 文件,可能会提供一些参数供用户使用时自定义。而在 SASS 组件内部,我们需要应用上用户设置的这些值。但是如果使用者没有自定义变量的值,那这些变量应该有自己的默认值。
SASS 中定义的变量,后设置的值会覆盖旧的值。
$color: red; $color: blue; .btn { color: $color; }
编译后为:
.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; }
!default
针对这种情况,SASS 提供了 !default
标识。将该标识应用于变量值后面,表示如果该变量没有在其他地方定义或即便定义了但值为 null
,那此处设置的默认值才生效,否则使用其他地方设置的那个值。
将上面 _lib.scss 进行改造:
_lib.scss
- $color: red; + $color: red!default; .btn { color: $color; }
使用:
$color: blue; @import "lib";
注意:需要将自定义的值先于 @import ,否则也不生效。
此时编译结果将是想要的那样,应用上了外部自定义的变量值。
.btn { color: blue; }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- go基础库之环境变量的获取与设置以及如何使用默认值
- 全局变量,静态全局变量,局部变量,静态局部变量
- springboot 默认日志配置
- HDFS副本设置——默认3
- WPF 绑定的默认模式
- StackOverflow转向默认使用HTTPS
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Complexity and Approximation
G. Ausiello、P. Crescenzi、V. Kann、Marchetti-sp、Giorgio Gambosi、Alberto M. Spaccamela / Springer / 2003-02 / USD 74.95
This book is an up-to-date documentation of the state of the art in combinatorial optimization, presenting approximate solutions of virtually all relevant classes of NP-hard optimization problems. The......一起来看看 《Complexity and Approximation》 这本书的介绍吧!