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

classic sass logoEver heard of SASS before?  If not, then you should know that it is an awesome little CSS3 extension (it stands for Syntactically Awesome Style Sheets), that allows you to do all kinds of stuff typically reserved for languages such as javascript. Variables, nested styles, and functions are all standard with SASS. Specifically, it will allow you to create a .scss file with all of these cool features, and then it will convert it to standard .css for you upon execution.

How do I get SASS?

SASS requires Ruby to be installed, so first you should download (http://rubyinstaller.org/downloads/) that. Once you have that running, open it up and type in the following:

gem install sass

And that’s it! SASS is now available to be used on your computer. To get started, create a style.scss file. This will have all of your SASS code in it, allowing us to use the following Ruby code to convert it to a .css file every time that we save it:


sass --watch style.scss:style.css

Let’s start using some of SASS’s features!

Importing

Your .scss file can contain all of the standard CSS3 code that you are used to, and using the import function, you can compile multiple .scss files into a single .css file. Doing this has a bunch of benefits including reduced http requests, less cached files, and the ability to share things such as variables (which we will talk about in a later piece).

Files that are to be imported are referred to as “partials” and must be prefixed with a ‘_’. For example, if we wanted to have a separate file with all of our navigation related css, we would name it _navigation.scss. Then in our style.scss file we would type:


@import "navigation";

That piece of code lets SASS know that during runtime it should combine the file named “_navigation” (it will have to reside within the same directory as our style function) into our style.scss and output the result as a single .css file.

Nesting

Being able to use nesting in your CSS is a very helpful feature, take for example a style that looks like this:


#content h1 {font-color:#FF0000;font-size:22pt;}
#content p {font-color:#FFFF00;}

Using the nesting feature, you could make code that does the same thing, but looks like this:


#content {
h1 {
font-color:#FF0000;font-size:22pt;
}
p {
font-color:#FFFF00;
}
}

This makes it a bit easier to read and write complex CSS files (especially if your IDE has bracket collapsing).

That’s enough SASS for now, but if you liked what you read so far, make sure that you check out the next part of this mini-series! We will be looking at how to variables and operations into the mix.

Leave a Reply

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