Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does !default in a css property value mean?

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.

like image 964
Coffee Bite Avatar asked May 17 '12 20:05

Coffee Bite


People also ask

What is the default value of the CSS property?

The initial value of a CSS property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not: For inherited properties, the initial value is used on the root element only, as long as no specified value is supplied.

What is the meaning of default in CSS?

The :default CSS pseudo-class selects form elements that are the default in a group of related elements.

What is the default value of a property of elements?

The default value of display may depend on what you mean with "default". Initial value: Each property has an initial value, defined in the property's definition table. If the property is not an inherited property, and the cascade does not result in a value, then the specified value of the property is its initial value.

What does default mean in SCSS?

default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null .


2 Answers

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

like image 82
Sarah M Giles Avatar answered Oct 02 '22 16:10

Sarah M Giles


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.

like image 34
BoltClock Avatar answered Oct 02 '22 16:10

BoltClock