Skip To Content
Development

Starting with Sass/SCSS and Compass Variables & Functions

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

Comments

Your email address will not be published. Required fields are marked *

Request a Quote

If you’re ready to change the trajectory of your business and
excited to partner with the right team to get the job done.