Time for your CSS to get a little Sass

I don’t mean sass as in attitude, I mean Sass.

“Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.”

Getting Started

The quote above covers everything Sass is about but lets go into some detail. Sass is a Ruby Gem that runs via the command line and watches a source file. As you save the file, Sass processes it and outputs a fully readable and useable CSS file for your site.

If you have Windows you can install Ruby from here. OS X has Ruby by default on the system but it is a 1.8.x version. If you want to upgrade to 1.9.x you can, I would suggest RMV. It will let you run a virtual ruby environment with any version of Ruby you like. Some versions of Linux such as Ubuntu, come with package managers such as Aptitude. Try running sudo apt-get install -y ruby1.9.1-full.

Once you have Ruby installed, you need Ruby Gems. Now that we have all the prerequisites out of the way you can start using Sass.

Install Sass by typing sudo gem install sass.

No go to your project directory and type sass –watch style.scss:style.css

Do all of you CSS editing in the style.scss file and every time you save Sass will convert it to the style.css file that you can load in your page.

Dive into Sass

Variables

Lets say your project has specific color pallet. You will more than likely use the same color is different places in your CSS file. The problem most designers face is if you need a change, you now have to go through all the lines of code that require the color change. Sass solves this issue by introducing variables.

The old way of color implementation:

.box
{
color: #0000FF;
}

.title
{
color: #0000FF;
}

.sidebar
{
color: #0000FF;
}

As you can see if you need to change to a new text color, you now have to go into three places to make that change. Now here is the same example using Sass.


$textColor = #0000FF;

.box
{
color: $textColor;
}

.title
{
color: $textColor;
}

.sidebar
{
color: $textColor;
}

The CSS file will look just like the 1st example but if you need to make a change, you only need to change the value of $textColor in one place and all of the values change.

That’s a sample for now, keep posted for other updates.

Leave a Reply

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