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.
  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.

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments