白云岛资源网 Design By www.pvray.com

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; }

相关资源
 

  • SASS Documentation - Default Values
  • A Sass !default use case

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

白云岛资源网 Design By www.pvray.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
白云岛资源网 Design By www.pvray.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。