How to use Sass variables to simplify your CSS code.
Variables can help keep things consistent throughout a website. Instead of repeating the same values across many different properties, you can simply set a variable, then refer to it whenever you need to. If you need to change the value, you only need to do it in one place.
If we look at the following Sass file, it contains two variables.
One variable is called
$primary-color and the other is called
Variables are like containers that store a value. In our case, we store the value
orange in one variable and
gold in the other.
Instead of typing out
orange everytime we need to use that color, we can use the variable name instead. If we need to update a color, we only need to update it in the place that we set the variable.
Variables start with a dollar sign (
$) followed by the variable name.
Variables are set like CSS properties — using a colon (
:) between the variable name and the value being assigned to it.
The variable name is whatever you want to call it. You could call the variable
$homer-simpson and it would still work.
Note that variables are written the same whether you use the indented syntax or the SCSS syntax.
Hyphens & Underscores
Variable names can use hyphens and underscores interchangeably. So our variable called
$primary-color could be accessed using
$primary_color and vice versa.
So our file could look like this and it would still work:
Variables can also be set within a selector. Like this:
However, such variables are only available within the level of nested selectors where theyâ€™re defined. But if theyâ€™re defined outside of any nested selectors, theyâ€™re available everywhere.
So we couldn't do this:
If you tried to compile that code, you'd receive an error that reads something like this: Error: Undefined variable: "$header-color"
However, the above example would work if you added the
!global flag when setting the variable.
So you can do the following:
This code will be compiled to the following CSS:
The variable can hold any CSS value we want. We could create a variable to hold font families, font weight, border widths, background images, etc.
Here's an example of some more variables added to the Sass file.
This will result in the following CSS file:
You can assign a default value to a variable, which will only be used if the variable doesn't have a value.
To do this, add the
!default flag to the end of the assignment. Like this:
In this particular case, the compiled CSS will be as follows:
The second (default) color wasn't used in this case, because a value had already been assigned to that variable.
But if we were to remove the first line, the second (default) value would be used.
So if our SCSS file looks like this:
The compiled CSS will look like this:
SassScript supports seven main data types:
- Numbers (e.g.
- Strings of text, with and without quotes (e.g.
- Colors (e.g.
rgba(105, 255, 0, 0.7))
- Booleans (e.g.
- Nulls (e.g.
- Lists of values, separated by spaces or commas (e.g.
2.5px 10px 0 7px,
Helvetica, Arial, sans-serif)
- Maps from one value to another (e.g.
(key1: value1, key2: value2))
SassScript also supports all other types of CSS property value, such as Unicode blocks and