7.3 Variables

• Avoid repetition
  • Set the value of a variable
  • Refer to the variable rather than to a particular property
• Set a default that others can override

In CSS

// if there is a shared property,
// it needs to be written in each rule

p {
  color: red;
}

a {
  color: red;
}

In Sass:

// store shared property in a variable
// refer to that variable in each rule that uses that property

$my_color: red;

p {
  color: $my_color;
}

a {
  color: $my_color;
}

To set a default in Sass, write !default so that other developers can override the value while adopting your module:

// now developers can provide their value

$my_color: ! red default;

p {
  color: $my_color;
}

a {
  color: $my_color;
}

See more on how to provide one’s own value in Sass documentation here.