Sass, Workflow Tools

Sass, Command Line and a Firewall

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

Install Sass!

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)

Ruby installer

Once downloaded, run the ‘rubyinstaller-1.9.3-p545.exe’ file.

Ruby setup

Select where you want Ruby to be installed then head to the ‘Start Command Prompt with Ruby’.

Ruby Start Command Prompt

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.

Command prompt error

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 

C:Ruby193/bin/gem.bat

gem.bat file contents

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

Sass installed

It’s good to double check you have the latest version of Sass, type: 

sass -v

It should return with Sass 3.3.6 (Maptastic Maple) (at the time of this post, 3.3.6 is the latest version)

Sass installed with version

Success!

Start writing Sass

Now that you have Sass installed, why stop now?

Here are a few good places to start:

Additional Tools

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!

Standard