What does !default in a css property value mean?

Question

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

E.g.

p {
  color: white !default;
}

What does !default do?

UPDATE

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

Valuator

Not present in css 2.1 w3.org/TR/CSS2 – Usufruct

never seen it before. could be something that only applies to bootstrap, maybe they have some kind of parse that looks for that – Seeker

Answer 1

Twitter Bootstrap uses LESS as far as I've seen. On the other hand, !default is 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.

Besides, I've not been able to find any references to !default in 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.

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

Frescobaldi

OK, I just downloaded and grepped a fresh copy of Bootstrap, and indeed, this is decidedly not from Bootstrap's source... – Frescobaldi

He might be mistaken, or he could be using a Sass port of Bootstrap. Whichever way, he asked an unclear question. – Snub

@thirtydot: Interesting, I wasn't aware of such a port. The code given above is still invalid Sass though, and I don't even need to grep the Sass port to know. – Frescobaldi

@Frescobaldi Sorry about the red herring. I was, indeed, working on the SASS port of Bootstrap. Here is a sample from the code: $yellow: #ffc40d !default; – Valuator

@Robert Pounder: Either it hasn't occurred to the answerer that they can change accepted answers, or they've forgotten about this question (note that our answers are nearly 5 years apart), or they simply don't care. – Frescobaldi

Answer 2

!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.

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.

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.

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

Prurient

"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." I had to hunt for this a little bit. For anybody interested, here's the link (v4.3) to the page Sarah mentions. – Medievalist

Answer 3

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

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.

Repertory

Answer 4

default-values

if that variable isn’t defined or its value is null. Otherwise, the existing value will be used.

Example

case 1: null

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

h1
  font-size: $MySize

output CSS

h1 {
  font-size: 5rem;
}

case 2: undefined

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

h1
  font-size: $MySize

output CSS

h1 {
  font-size: 5rem;
}

case 3: defined already

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

h1
  font-size: $MySize

output CSS

h1 {
  font-size: 30rem;
}

Approbation

Answer 5

Here is an example.

  $white: white !default;

If you don't define the $white before the code block above, then the $white will be white.

If you define it like this

$white: #eee;

then the $white will be #eee

Here is a link about it in bootstrap-vue,

Bowman