Gage Skidmore, Sarah Palin

Introduction to Gulp.js 4: Creating CSS with Sass (and Compass)

This is the 4th part of my series Introduction to Gulp.js. Today I will show how to use Sass (and Compass if you want) to create CSS files. Furthermore I will add vendor prefixes with Autoprefixer and create Source Maps for easier debugging of the Sass files.

I use Sass as preprocessor for my CSS files. If you like to use Compass, you just have to set an option for this task.

Go ahead and install the npm modules needed:

$ npm install --save-dev gulp-plumber@1.0.1 gulp-ruby-sass@2.0.4 gulp-filter@3.0.1 gulp-changed@1.0.0 gulp-autoprefixer@3.0.2 gulp-sourcemaps@1.6.0

That’s a lot, but this task will do a lot.


I load all my files with the suffix of *.sass or *.scss. First I pipe the files through Plumber. It will keep Gulp.js running if I create a syntax error in one of my files. It would normally just crash with an error. The next step creates the CSS files, running the sass command. I create source maps and finally put the CSS files to it’s destination.

And I run the CSS files through Autoprefixer, which will add vendor prefixes. I used the Mixins of Compass a long time, but stopped now and write pure CSS. All vendor prefixes are added later for the browsers I want to support.

You might have guessed: If you want to use Compass, just set the option compass to true.

Source Code

View Source on GitHub


This concludes the 4th part of my series Introduction to Gulp.js. We learned how to keep Gulp.js running, even when we produce errors, how to preprocess SCSS files with Sass, create Source Maps and add vendor prefixes to the CSS files.

This article was first published on
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.