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

Question

twitter 引导代码有很多 CSS 属性，末尾带有

!default

。

例如

p {
  color: white !default;
}

!default

有什么作用？

更新

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

Answer 1

!default

在 Bootstrap Sass 中经常使用。它类似于反向

!important

。所有 Bootstraps 变量均使用

!default

设置，以允许开发人员进一步自定义 bootstrap。使用

!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 的页面在文档中详细介绍了如何自定义和编译它。

我不知道为什么 less 不这样做。我没有使用 less 进行太多工作，不知道它是否有自己内置的变量管理。

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

Answer 2

据我所知，Twitter Bootstrap 使用 LESS。另一方面，

!default

实际上是Sass的一部分，用于为Sass变量（

$var

）提供默认值，这将使其在给定的上下文中无效，甚至在Sass中。

此外，我在

LESS 文档

中找不到任何对 !default 的引用，据我所知，它是 Sass 独有的。您确定您在 Bootstrap 的源代码中找到了这个而不是在其他地方吗？因为老实说我不记得在 Bootstrap 的样式表中看到过 Sass/SCSS 代码。

无论如何，CSS 中以

!

开头的唯一有效标记是

!important

，您可能已经知道了。

Answer 3

您可以在 sass-lang 网站的文档部分（变量）中找到以下准确的定义和合理的解释 - 默认值：

通常，当您为变量赋值时，如果该变量已经有值，则其旧值将被覆盖。但如果您正在编写 Sass 库，您可能希望允许用户在使用库的变量生成 CSS 之前配置它们。 为了实现这一点，Sass 提供了 !default 标志。仅当该变量未定义或其值为 null

 时，才会为该变量赋值。否则，将使用现有值

。

Answer 4

默认值

如果该变量未定义或其值为 null。否则，将使用现有值。

示例

情况1：空

// test.sass
$MySize: null
$MySize: 5rem!default // since MySize is "null" so use default

h1
  font-size: $MySize

输出CSS

h1 {
  font-size: 5rem;
}

情况2：未定义

// test.sass
$MySize: 5rem!default // since MySize is "undefined" so use default

h1
  font-size: $MySize

输出CSS

h1 {
  font-size: 5rem;
}

情况 3：已定义

// test.sass
$MySize: 30rem
$MySize: 5rem!default // since MySize has been defined. So ignore this setting.

h1
  font-size: $MySize

输出CSS

h1 {
  font-size: 30rem;
}

Answer 5

这是一个例子。

$white: white !default; 如果您没有在上面的代码块中定义

$white

before，那么 $white

 将为白色。

如果你这样定义

$white: #eee; 那么

$white

 将是 

#eee

这里有一个关于它的链接

bootstrap-vue，