SASS and the dreaded terminal

For those of you who have shied away from SASS because you didn’t want to use the terminal to get set up or compile your SASS to CSS your life just got easier.

If you weren’t aware of how easy it is to get up and running with SASS (on a mac) all you need to do is follow two steps:

1. Install SASS on your machine.

Open up terminal and write:

gem install sass

Now you have SASS installed on your computer.

2. Tell SASS to watch your SASS file. When a change is made it will update your css file.

The one tricky thing with Terminal is getting to your SASS directory in order to watch it. This is where an update to Yosemite comes in. There is now an option to right click on a directory or folder and have it open terminal in that location.

In order to set this up go to System Preferences > Keyboard > Shortcuts > Services and check off New Terminal at Folder (see screenshot below).

New Terminal at Folder screen shot

Now that you have done that go to your directory that has your SASS and CSS directories in it and right click and choose Services > New Terminal at Folder (see screenshot below).

New Terminal at Folder Screenshot

Now you can tell SASS to watch your SASS files and compile them.

sass --watch sass/input.scss:css/output.css

You can also tell SASS to compress your css to remove all the whitespace and make the file as small as possible.

--style compressed

Just tag that onto the end of your watch command like so:

sass --watch sass/input.scss:css/output.css --style compressed

So now you are set up with SASS and have it compiling to CSS.

Hopefully this helps minimize the fear in your heart.