After a year off from work (I was on maternity leave) I’m finally getting a chance to catch up on what I’ve missed from the Web Development community. One of which is CSS Preprocessors which has been around for a few years now. I won’t go into the details to describe what it is so I’ve listed a few popular and most used CSS Preprocessors.
After reading about CSS Preprocessors I’ve decided to explore and experiment with Sass based on these reasons:
“Sass makes it easier to write less CSS codes and manipulate them dynamically. It’s a great way to write more functional CSS codes and can speed up the workflow of every web developer and designer” – from 1st Web Designer
“It’s a way to simplify your CSS workflow, making development and maintenance tasks easier. For instance, have you ever had to do a find-and-replace in your stylesheet to change a particular HEX color for a particular indecisive client? Or had to open up the calculator app to figure out a column width in a multi-column design? Sass introduces new concepts such as variables, mixins, nestings and selector inheritance” – from Treehouse Blog
First you’ll need to install Ruby as Sass is based on Ruby. (I’m also making the assumption you’re using Windows)
Download Ruby 1.9.3-p545. (Based on the time of this post, 1.9.3-p545 is the recommended version)
Once downloaded, run the ‘rubyinstaller-1.9.3-p545.exe’ file.
Select where you want Ruby to be installed then head to the ‘Start Command Prompt with Ruby’.
Type the following in the Command Prompt to install Sass:
gem install sass
You will then see a returned error message appear in your Command Prompt.
I had issues with installing Sass in my workplace since I’m sitting behind a firewall. So now you’ll need to do the following:
Get me through the firewall!
Navigate in Windows Explorer to the folder where you installed Ruby and open the ‘gem.bat’ file within the ‘bin’ folder. For example mine is located at
Replace the last line with your proxy server address and port number. You can find your proxy and port settings in your browser by navigating through the Internet Options / Network Connections / LAN settings.
@ECHO OFF IF NOT "%~f0" == "~f0" GOTO :WinNT ECHO.This version of Ruby has not been built with support for Windows 95/98/Me. GOTO :EOF :WinNT @"%~dp0ruby.exe" "%~dpn0" %* --http-proxy http://your-company-proxy-server-address:port-number
Now go back to the ‘Start Command Prompt with Ruby’ and type:
gem install sass
It’s good to double check you have the latest version of Sass, type:
It should return with Sass 3.3.6 (Maptastic Maple) (at the time of this post, 3.3.6 is the latest version)
Start writing Sass
Now that you have Sass installed, why stop now?
Here are a few good places to start:
There are also plenty of gems to install that will help with your development with Sass eg. Susy and Burbon to name a few.
Workflow and Processes
Lastly, there are additional tools that can help speed up your workflow and process when developing sites and web apps such as:
I would like to write more about each framework and development tool and how they can be used together and not forgetting Github (which I’m new to using) so I’ll have to save that for another future blog post!