CSS属性值中的!default是什么意思?


82

twitter引导程序代码具有许多CSS属性,!default最后带有一个。

例如

p {
  color: white !default;
}

怎么!default办?

更新

我不好说不清楚。我正在使用Bootstrap的SASS部分。


在CSS 2.1中不存在w3.org/TR/CSS2
Marcin

1
以前没看过 可能只适用于自举,也许他们有某种解析来寻找这一点
Huangism

Answers:


52

据我所知,Twitter Bootstrap使用LESS。另一方面,!default它实际上是Sass的一部分,用于为Sass变量($var)提供默认值,这将使其在给定的上下文中无效,即使在Sass中也是如此

此外,我!defaultLESS文档中找不到任何引用,据我所知,它仅属于Sass。您确定在Bootstrap的源代码中找到了这个吗?因为老实说我不记得在Bootstrap的样式表中看到Sass / SCSS代码。

就其价值而言,!CSS中唯一以开头的有效令牌是!important您可能已经知道了


1
好的,我只是下载并复制了Bootstrap的新副本,确实,这绝对不是Bootstrap的来源...
BoltClock

1
他可能会弄错,或者可能正在使用BootstrapSass端口。无论哪种方式,他都提出了一个不清楚的问题。
2012年

@thirtydot:有趣的是,我并不知道这样的端口。上面给出的代码仍然是无效的Sass,我什至不需要grep Sass端口来知道。
BoltClock

@BoltClock对不起,红鲱鱼。我确实在Bootstrap的SASS端口上工作。以下是代码的示例:$yellow: #ffc40d !default;
Coffee Bite 2012年

@Robert Pounder:回答者并没有想到他们可以更改已接受的答案,或者他们已经忘记了这个问题(请注意,我们的答案相隔将近5年),或者他们根本不在乎。
BoltClock

81

!default通常在Bootstrap Sass中使用。它类似于反向!important。所有的Bootstraps变量都使用!default设置,以允许开发人员进一步自定义引导程序。使用!default时,sass仅在尚未设置变量的情况下定义它。

这允许更大的灵活性。

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

那么为什么这很重要?Bootstrap是一个软件包。大多数人不编辑Bootstrap源代码。永远不要更新自举信号源。要自定义引导程序,您将添加自己的变量文件并使用引导程序代码对其进行编译,但切勿触摸本机引导程序包。Bootstrap sass的页面全面介绍了如何在文档中自定义和编译它。

我不知道为什么少不这样做。我花了很少的精力做很多工作,也不知道它是否具有内置的变量管理功能。

小提琴示例 https://jsfiddle.net/siggysid/344dnnwz/


1
要自定义引导程序,您将添加自己的变量文件并使用引导程序代码对其进行编译,但切勿触摸本机引导程序包。Bootstrapsass的页面全面介绍了如何自定义和编译文档。 “我不得不寻找这一点。对于任何感兴趣的人,这是Sarah提到的页面的链接(v4.3)
John E

1

您可以在sass-lang网站的doc部分(变量)中找到以下确切定义和恰当的解释-缺省值:

通常,当您为变量分配值时,如果该变量已具有值,则其旧值将被覆盖。但是,如果您正在编写Sass库,则可能希望允许用户在使用库变量生成CSS之前对其进行配置。为了使之成为可能,Sass提供了!default标志。仅在未定义变量或其值为null时,才为该变量分配值。否则,将使用现有值。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.