Free Your MIND (And Your SASS Will Follow) – pt. 2 of 4 on this CSS3 extension

SASS LogoYou probably made it here because you’re interested in learning how to use SASS, and that’s good, because that’s exactly what we aim to do here! First though, make sure that you check out our earlier piece on learning SASS where we go over things like what SASS is, how to install it, how importing works, and how you can use nesting to make style sheets easier.

This time we’re going to look a bit further into using SASS, and show you how to use variables and operators.

SASS Variables

If you’ve ever had to change a highly used value in a stylesheet before, then you know just how useful variables in SASS can be. Instead of going through and changing each instance of your text throughout your stylesheet one at a time, you could instead place the value into a variable and then have each style reference it (making you only have to change one value, instead of many).

Variables are prefaced with a $ sign, and are declared similarly to how styles are declared. Setting a text color with a variable would look something like this:


$textcolor: #0000FF;

p {
color:$textcolor;
}

h1 {
color:$textcolor;
}

Using variables like this, you can simply change the value of $textcolor at the top of your stylesheet, and it will be updated throughout the rest of the file. Super useful!

Using Operations

SASS gives you the ability to use operators on your variables as well, making it even easier to keep your stylesheet easy to manage. This works especially well for grid-based layouts where you could do something like this:


$columns: 5;

#col div {
width: 800px/$columns;
}

Using a setup like this allows you to have a standard stylesheet that can work with a 5 column site, but you could quickly change it to a 3 column site by switching out the variable’s value.

Having this kind of fluidity makes development so much easier, and now that we’ve talked about variables and operators, you can start to fully get into using SASS. Next time, we’re going to take it a step further, taking a look at some of the functions that come standard with SASS, so make sure you check it out!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.