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