Global Variables in SASS

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:

Then in the main SCSS file you import the variables file:

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: