SASS 中变量的默认值的使用方法
发布时间：2019-04-28 16:03:52 作者：刘哇勇的部落格 
我要评论
我要评论这篇文章主要介绍了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; }
相关资源
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
CSS预编译器有 SASS LESS Stylus等等，SCSS是SASS3引入的新语法。这篇文章给大家介绍sass(scss）的安装与使用教程，感兴趣的朋友一起看看吧2018-10-15- Sass可以简化Css工作流，使Css的扩展和维护工作更容易，这篇文章主要介绍了sass简介的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-19
- 这篇文章主要介绍了CSS的Sass框架中代码注释的编写方法,Sass完全支持CSS基本的单行注释与多行注释,需要的朋友可以参考下2016-04-11
- 这篇文章主要介绍了利用CSS的Sass预处理器来制作居中效果的教程,围绕Sass mixin的编写方法进行讲解,同时介绍了如何使用Flexbox来让子元素居中,需要的朋友可以参考下2016-03-10
- 这篇文章主要介绍了CSS的Sass框架中混合宏的使用,文中对混合宏所支持的参数特别是Null参数有较为详细的讲解,需要的朋友可以参考下2016-03-08
- 这篇文章主要介绍了使用Sass来编写面向对象的CSS代码,SASS如今正在成为最流行的CSS开发框架,需要的朋友可以参考下2015-07-22
- Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护，需要的朋友可以参考下2014-09-21
- Css可以让你做很多事情，但它毕竟是给浏览器认的东西，对开发者来说，Css缺乏很多特性2012-07-11
最新评论