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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10643107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:54:05  来源:igfitidea点击:

What does !default in a css property value mean?

csstwitter-bootstrapsass

提问by Coffee Bite

The twitter bootstrap code has a lot of CSS properties with a !defaultat the end.

twitter bootstrap 代码有很多!default以 结尾的 CSS 属性。

E.g.

例如

p {
  color: white !default;
}

What does !defaultdo?

有什么作用!default

UPDATE

更新

My bad for not being clear. I am using the SASS part of Bootstrap.

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

采纳答案by BoltClock

Twitter Bootstrap uses LESS as far as I've seen. On the other hand, !defaultis actually part of Sass, and is used for giving Sass variables ($var) default values, which would make it invalid in your given context, even in Sass.

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

Besides, I've not been able to find any references to !defaultin the LESS documentation, and to my knowledge it is exclusive to Sass. Are you sure you found this in Bootstrap's source and not elsewhere? Because I honestly don't remember seeing Sass/SCSS code in Bootstrap's stylesheets.

此外,我!defaultLESS 文档中找不到任何引用,据我所知,它是 Sass 独有的。你确定你在 Bootstrap 的源代码中找到了这个,而不是在其他地方?因为老实说我不记得在 Bootstrap 的样式表中看到过 Sass/SCSS 代码。

For what it's worth, the only valid token that starts with !in CSS is !important, which you may already be aware of.

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

回答by Sarah M Giles

!default is used often in Bootstrap Sass. It is similar to a reverse !important. All of Bootstraps Variables are set using !default to allow the developer to further customize bootstrap. With !default sass will only define a variable if it has not already been set.

!default 在 Bootstrap Sass 中经常使用。它类似于反向 !important。所有引导变量都使用 !default 设置,以允许开发人员进一步自定义引导。使用 !default sass 只会定义一个尚未设置的变量。

This allows for more flexibility.

这允许更大的灵活性。

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

So Why is this important? Bootstrap is a package. Most people don't edit the Bootstrap source. NEVER UPDATE THE BOOTSTRAP SOURCE. To customize bootstrap you will add your own variable file and compile it with the bootstrap code but never touch the native bootstrap package. Bootstrap sass's page has the full skinny on how to customize and compile it in the documentations.

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

I don't know why less does not do this. I have not worked much with less and do not know if it has it's own built in variable management.

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

Example fiddle https://jsfiddle.net/siggysid/344dnnwz/

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

回答by Omid Rouhani

You can find the following exact definition and a decent explanation in sass-langwebsite in its doc section (variable) - default value:

您可以在sass-lang网站的 doc 部分(变量)中找到以下确切定义和体面的解释- 默认值:

Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you're writing a Sass library, you might want to allow your users to configure your library's variables before you use them to generate CSS. To make this possible, Sass provides the !default flag. This assigns a value to a variable only if that variable isn't defined or its value is null. Otherwise, the existing value will be used.

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