getting started using sass

So what is sass? Sass is an extension of css3! ever wanted to define some variables in your style sheet for colors or sizing, well sass makes these kinds of additions easy. Sass is a sort of meta-language that works on top of CSS to extend its syntax with various additional features that make management easy. It runs on Ruby and is pretty easy to setup and here is how. I’m running on windows here so first off I grabbed a ruby installation for windows from here. I downloaded the msi intsaller and during the installation I made sure to check the boxes to add ruby to the system path. Once you have it installed open up command prompt and type in

gem install sass

Assuming ruby is installed correctly you should get some output like this

Fetching: sass-3.2.3.gem (100%)
Successfully installed sass-3.2.3
1 gem installed
Installing ri documentation for sass-3.2.3...
Installing RDoc documentation for sass-3.2.3...

That’s it! You should now be ready to use sass scss files. Create a new stylesheet file but name the extension scss instead of css, for my example i’m using main.scss. Open it up in your favourite text editor and now we can start writing some extended css. For a simple example lets add a few variables, this can be done by using the dollar sign and declaring the name and then the value in a similar syntax to css. For example I’ve added some color variables. I want the text throughout the site to be grey and the links in the site to be red and black when hovered over.

$text-color: #666666;
$link-color: #FF0000;
$hover-color: #000000;

Doing this means anytime I want to reference my text color or link colors I can just write some regular css but instead of writing the color I can write the variable. Like so

p {
    	color:$text-color;
}

If you know any programming languages this should be very familiar to you. Once we are happy with the sass stylesheet we need to translate it into a regular .css stylesheet. There are a few commands you can use, you can just plain convert the file or you can watch it for updates so any changes you make automatically get updated to the css file. I prefer to just do a 1 time conversion and do this again when I need to. To help me out I created a little batch file that i can drop in the same folder as the scss and run. It prompts you for the type of sass conversion and also prompts you for the filename and then does the rest of the work.

@ECHO OFF
:start
ECHO.
ECHO 1. Convert single scss file to css
ECHO 2. Watch/Autoupdate single scss file
ECHO 3. Watch/Autoupdate entire directory scss files
ECHO.
set /p choice=Select option:
if not '%choice%'=='' set choice=%choice:~0,1%
if '%choice%'=='1' goto convert
if '%choice%'=='2' goto watchfile
if '%choice%'=='3' goto watchfolder
ECHO "%choice%" is not valid please try again
ECHO.
goto start
:convert
set /p fname= Please enter the scss filename without extension: 
sass %fname%.scss %fname%.css
goto end
:watchfile
set /p fname= Please enter the scss filename without extension: 
sass --watch %fname%.scss:%fname%.css
goto end
:watchfolder
set /p folname= Please enter the folder path containing scss files: 
sass --watch %folname%:%folname%
goto end
:end
pause
exit

Click here to download this batch file and my example of using sass. There are many features in sass such as nesting, parent referencing and more to see full details take a look at http://sass-lang.com.