Using global variables in a SASS stylesheet saves time by eliminating repetitious code. In this example I will show how to declare global color variables that can be referenced by name in multiple partial stylesheets.
First we create an SCSS file called “_variables.scss”. The name isn’t important but the leading underscore is. Inside we declare the variables like so:
|
1 2 |
$turquoise: #1abc9c; $wisteria: #8e44ad; |
Then in the main SCSS file you import the variables file:
|
1 |
@import 'variables'; |
The variables should now be accessible from inside other stylesheets provided they are properly imported. Here is an example of a “welcome.scss” file that uses the global variables:
|
1 2 3 4 5 6 7 |
.container { background-color: $wisteria; } h3 { color: $turquoise; } |