今天就跟大家聊聊有关如何在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中使用变量的默认值-创新互联
当前路径：
http://www.cdkjz.cn/article/ddedph.html
