//Example1 Dress color = red
$auroras-dress-color: blue;
$auroras-dress-color: red;
//Example2 Dress color = red
$auroras-dress-color: blue !default;
$auroras-dress-color: red;
//Example3 Dress color = blue
$auroras-dress-color: blue;
$auroras-dress-color: red !default;
5条答案
按热度按时间dzjeubhm1#
!default经常在 Bootstrap Sass中使用。它类似于反向!重要。所有 Bootstrap 变量都使用!default设置,以允许开发人员进一步自定义 Bootstrap 。使用!default,sass将仅定义尚未设置的变量。
这允许更大的灵活性。
那么为什么这很重要呢?Bootstrap是一个包。大多数人不编辑Bootstrap源代码。永远不要更新Bootstrap源代码。要自定义bootstrap,你需要添加你自己的变量文件,并用bootstrap代码编译它,但永远不要接触原生的bootstrap包。Bootstrap sass的页面有关于如何自定义和编译它的完整说明。
我不知道为什么less不这样做。我没有用less做过很多工作,不知道它是否有自己的内置变量管理。
小提琴示例https://jsfiddle.net/siggysid/344dnnwz/
o3imoua42#
另一方面,
!default
实际上是Sass的一部分,用于为Sass变量($var
)提供默认值,这将使它在给定的上下文中无效,* 甚至在Sass* 中也是如此。此外,我在the LESS documentation中找不到任何对
!default
的引用,据我所知,它是Sass独有的。你确定你在Bootstrap的源代码中找到了这个,而不是在其他地方吗?因为老实说,我不记得在Bootstrap的样式表中看到过Sass/SCSS代码。值得注意的是,CSS中以
!
开头的唯一有效标记是!important
,您可能已经知道了这一点。p1iqtdky3#
您可以在sass-lang网站的doc部分(变量)- default value中找到以下确切的定义和适当的解释:
通常当你给一个变量赋值时,如果这个变量已经有了值,它的旧值会被覆盖。但是如果你正在写一个Sass库,你可能希望允许你的用户在你使用它们生成CSS之前配置你库的变量。为了使这成为可能,Sass提供了!default标志。它只在变量未定义或其值为
null
时才给该变量赋值。否则,将使用现有值。nzk0hqpo4#
默认值
如果该变量未定义或其值为空,则返回值。否则,将使用现有值。
示例
案例1:零值
输出CSS
案例二:未定义的
输出CSS
案例三:已定义
输出CSS
tquggr8v5#
下面是一个例子。
如果没有在上面的代码块之前定义
$white
,则$white
将为白色。如果你这样定义
那么
$white
将是#eee
下面是bootstrap-vue中有关它的链接,