您现在的位置是：网站首页> 编程资料编程资料

SASS 中变量的默认值的使用方法sass(scss）的安装与使用教程sass简介_动力节点Java学院整理详解CSS的Sass框架中代码注释的编写方法利用CSS的Sass预处理器（框架）来制作居中效果深入解析CSS的Sass框架中混合宏的使用使用Sass来编写面向对象的CSS代码CSS制作框架 Sass 3.4.4 今日发布学习CSS预处理器:Sass和less进行对比

2021-09-03 902人已围观

简介这篇文章主要介绍了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; }

相关资源

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