15

Example:

$link-color: $mycolor !default;

I have a theory, but I want to validate it here. I know that initial is used to set an attribute back to the browsers default. Using !default overrides the browser's native default value and replaces $link-color with the value of $mycolor from the example above.

Am I understanding that correctly?

Attempts at googling this question has lead me to many blog posts about the bootstrap and foundation frameworks, but I have not found a straightforward answer to what !default specifically does. I'm guessing because google ignores the bang (!) so it looks like I'm asking about some other kind of default value.

Thanks

rakitin
  • 1,943
  • 6
  • 25
  • 51

1 Answers1

21

!default is part of Sass' variables handling. The generated CSS which reaches the browser will never contain "!default".

Quoting the docs:

Variable Defaults: !default

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

$link-color is merely a variable. In framework context, !default is used to not overwrite customizations made by you or other included modules, while providing a default value for the variable if it hasn't been given a value yet.

Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
  • 1
    **JS** equivalent: `foo = foo || bar;`. **Java** equivalent `if(foo == null) {foo = bar;}`. **C#** equivalent: `foo = foo ?? bar;`. – AlexMelw Jul 08 '19 at 14:23
  • 1
    Javascript ES11 introduced nullish coalescing operator `??` now as well – Allwe May 31 '21 at 09:32