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.
Go ahead and install the npm modules needed:
$ npm install --save-dev firstname.lastname@example.org email@example.com firstname.lastname@example.org email@example.com firstname.lastname@example.org email@example.com
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.
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 stefanimhoff.de