Installing and using sass on Mac

Sass (http://sass-lang.com/) is a great CSS extension. I will not write more about it. The main goal of this article is to quickly present how to install sass on Mac.

Installation

  • Open your Terminal app
  • Add the following line in your Terminal:
  • sudo gem install sass
  • At this point, sass should be installed

 

Using sass

We will assume you have a local project on your computer at : /user/yourname/sites/yourproject

To use sass, you need to create a .scss file into your project into /user/yourname/sites/yourproject/css
Basically, sass need to convert your .scss file into a .css file. Usually, sass will use the same file name. So, style.scss will be convert into a style.css.

To do so, you need to use the Terminal and the command --watch

  • Open your Terminal
  • Type the line:

  • sass --watch .
  • You normally get a message that sass is ready to "watch" into your project
  • Then type:
  • sass --watch ~/user/yourname/sites/yourproject/css

You are ready now! All .scss file into your "css" document will be convert into css file.

Another solution will be to access first into the correct working directory, and then, watch it:

  • Open your Terminal
  • Type the line:

  • cd user/yourname/sites/yourproject
  • and then
  • sass --watch css

 

Is it sass already install?

If you want to check if sass is already install on a Mac, you can use this commad:

sass -v

That command should return your sass version, for example:

Sass 3.4.21 (Selective Steve)

 

Update sass

If you want to update your sass version, type this command:

sudo gem update sass

If you have an older version, the later version will be installed.