How to define variables in SCSS (Sass)?

Sass or SCSS variables are similar to PHP variables in one way. Just assign a value to a variable name that starts with a dollar sign ($).

Just like this:

$base-color: #c6538c;

Sass (SCSS) Variables are really helpful in reducing repetition and even complex math calculation.

Sass doesn’t differentiate between hyphens and underscores when it comes to variable names. So, $font-size and $font_size both are like calling the same variable.

The SCSS code above for ‘alert‘ class compiles into this CSS:

.alert {
  border: 1px solid rgba(255, 76, 76, 0.88);
  color: #ff4c4c;
}

Tweet about it