node-sass quick start tutorial on Linux and Mac

Sass (Syntactically Awesome Stylesheets) is a style sheet language which brings programming features like variables, etc. to css. It makes maintaining and modifications in css easier. The new main syntax of sass (version 3) is called scss (sassy css).

Here is quick start guide of installing and using node-sass on Linux and Mac. Note that node-sass uses LibSass, the C version of Sass.

1. First install node and npm using the following steps.
   • How to install node (node.js) on Mac
   • How to install node.js on Ubuntu Linux
2. Install node-sass package using npm install. For Ubuntu, you will have to use sudo.

   $ sudo npm install node-sass  # Ubuntu
   $ npm install node-sass  # Mac
   

   To install globally

   $ sudo npm install -g node-sass  # Ubuntu
   $ npm install -g node-sass  # Mac
   

3. Check node-sass version

   $ node-sass --version
   node-sass	3.4.2	(Wrapper)	[JavaScript]
   libsass  	3.3.2	(Sass Compiler)	[C/C++]
   

4. Create a test scss file (test.scss) containing a variable.
   

   $bgcolor: red;
   div {
     background-color: $bgcolor;
   }
   h2 {
     background-color: $bgcolor;
   }

5. Compile test.scss to test.css

   $ node-sass test.scss test.css
   Rendering Complete, saving .css file...
   Wrote CSS to /Users/user1/tmp3/test.css
   $ cat test.css
   div {
     background-color: red; }
   
   h2 {
     background-color: red; }
   

   Note that the variable has been replaced by it value.