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

以上就是关于“SASS中自定义变量的使用是怎样，哪些事项要注意”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

标签： SASS变量

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS中will-change的使用作用是什么，有哪些要注意的下一篇：移动端的两种布局怎么实现，元素像素单位如何换为rem