Cacher is the code snippet organizer for pro developers

From an answer on Stack Overflow

You don't need to download and install libsass manually. It is installed with an implementer. I picked node-sass implementer because it is based on node.js.

Installing node-sass If you don't have npm, install Node.js first. To install node-sass globally [-g]:

$ npm install -g node-sass

This will hopefully install all you need, if not read libsass at the bottom.

How to use node-sass from Command line General format:

$ node-sass [options] [output.css] cat | node-sass > output.css Examples:

Compile a single file manually:

$ node-sass my-styles.scss my-styles.css

Compile all the files in a folder manually:

$ node-sass my-sass-folder/ -o my-css-folder/

Compile all the files in a folder automatically whenever the source file(s) are modified:

$ node-sass -w sass/ -o css/

[-w] adds a watch for changes to the file(s) More usefull options like 'compression' @ here.

Command line is good for a quick solution, however, most pros use task runners like Grunt.js or Gulp.js to automate the build process.

How to use with Gulp If you haven't installed Gulp globally:

$ npm install -g gulp

If you haven't installed Gulp locally:

$ npm install --save-dev gulp

--save-dev will make gulp appear in package.json devDependencies.

Install gulp-sass locally (in your project):

$ npm install gulp-sass --save-dev

If you haven't setup gulp for your project: Create a gulpfile.js file in your project root folder with this content:

'use strict';
var gulp = require('gulp');

A basic example to transpile

Add this code to your gulpfile.js:

var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

If you run this code, it will compile .scss file(s) in sass folder and generate .css file(s) in the css folder.

$ gulp sass

To make life easier, let's add a watch so we don't have to compile it manually. Add this code to your gulpfile.js:

gulp.task('sass:watch', function () {
  gulp.watch('./sass/*.scss', ['sass']);
});

All is set now! Just run the watch task:

$ gulp sass:watch