My Favorite New Toy

2009
Jan
2
4

Tags

In my quest to become a better RoR developer/Web Designer I have come across something that has made creating CSS for websites just that much easier. Sass is a meta language that actually allows you the developer to create cleaner CSS code.

Sass actually even adds some new functionalities to CSS. It allows you to nest tags and helps you create nice semantically meaningful code.

Also I allows you to set variables in your css files. So for instance you need to use a particular color more than once you an set a variable at the top of your sass file with that color value like so:

Then throughout your Sass file you can reference that variable.

The greatest part is if you need to change that color to another one you only have to change your code in one spot. Also SASS also allows you to preform simple mathematical operations on CSS code.

Another powerful thing about SASS is the ability to use mix-ins. Mix-ins allow you to reuse blocks CSS code. The greatest thing about them is that you can even pass variables to the mix-in and even assign a default value if no variable is passed in. So say you wanted a to have several divs with borders but you didn't want to assign them all to one class you could create a mix-in in Sass.

Then you could use the mix-in using the folowing

Now we have seen what SASS can do for us, how do we go about installing it and using it? To install Sass you need to install to first install Ruby. If you are a Mac user you already have Ruby installed as it come with the Mac OS. If you are a Linux or Windows user you can follow the instructions listed at http://www.ruby-lang.org/en/downloads/ to install and setup ruby. Once you have Ruby installed you can open a terminal or command prompt window and enter:

That will install Sass and Haml on you computer.

To use Sass you need to create a file with .scss extention and give sass this comand.

Sass then will watch that file and export any changes to the scss file to a CSS you can link to in your html pages.

So that is all there is to it. For more information you can visit the Sass website at http://sass-lang.com.