Variables in Sass/SCSS

This article assumes that you already have a basic understanding of nesting and compass.

Variables are a programming concept you most likely associate with languages like Javascript, PHP, Ruby, etc.. If you’ve done any programming before outside of HTML/CSS, you are probably already familiar with variables. For those of you who aren’t, a variable is essentially a stored value that is referenced by the variable name. Still over your head? The following example will make it super easy to understand.

Regular CSS

a {
	color: #e71708;
}

#header-nav {
	border-bottom: 2px solid #e71708;
}

#page-footer {
	background-color: #e71708;
}

SCSS

$my-color: #e71708;

a {
	color: $my-color;
}

#header-nav {
	border-bottom: 2px solid $my-color;
}

#page-footer {
	background-color: $my-color;
}

Using the variable, I’ve immediately made my CSS much more scalable and maintainable; I can re-use this color easily wherever I want in my code. When working on larger projects the use of variables for repeated and/or common properties can really aid in development.

Functions in Sass/SCSS

Sass comes with a whole slew of super useful functions (you can see a full list here). Some of which you’ll find are invaluable tools. I’ve come up with an example of how