gulp and Sass

Sass

Sass is extension language.
We can compile sass as css. Sass is easy to write compare to CSS.

With Gulp

To use sass with gulp, install gulp-sass

npm install gulp --save
npm install gulp-sass --save

Sample

Project Structure

Project
|-css
|
|-sass
|   |- index.scss
|-index.html
|-gulpfile.js
|-package.json

gulp.js

var gulp = require('gulp');
var sass = require('gulp-sass');

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

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

Compile scss file to css file.

gulp css

I also added watch task to keep watching scss change and compile immediately.

SCSS

h1 {
  .main {
    color: red;
  }
}

Compiled css

h1 .main {
  color: red; }