Having an automated and independent SCSS to CSS workflow allows for an efficient development experience. In this tutorial we use Gulp, a multipurpose tool that automates our frontend processes, to build an automated workflow that will convert SCSS to CSS.

The open-source packages used in this guide are retrieved using NodeJS. You can install this separately here.

SCSS is a superset of CSS that allows you to add variables, mixins, and inheritance (to name a few) to your stylesheet. It allows you to write CSS that makes logical and organizational sense.

First, we'll create a directory which we'll use the rest of this tutorial. In that folder, we'll create two sub-folders called css and scss. Our directory should look like...

project /
  |  css /
  |  scss /

First, we'll need to install Gulp globally, which will provide us access to many Gulp-specific commands, including those to run the actual Gulp script which will convert our SCSS to CSS. To do so, open up a console and input the following command:

$ npm install --global gulp

Then, we'll need to create package.json, a file which lets Node know which packages are needed to run this project. You can give any appropriate responses to the prompts that pop up.

$ npm init

A gulpfile.js contains all tasks which we'll later define and implement. These tasks will be available for us to use for this particular project. In this particular tutorial we'll have two tasks, one of which will convert our SCSS to CSS.

Our project directory should now look like...

project /
  |  gulpfile.js
  |  package.json
  |  css /
  |  scss /

Let's now install some dependencies that we'll specifically need for our project. We'll install Gulp locally (in addition to having it installed globally). We'll also install gulp-sass, a package that performs the actual SCSS to CSS conversion.

$ npm install gulp --save-dev
$ npm install gulp-sass --save-dev

In gulpfile.js, we'll implement a task which will convert any SCSS file in the scss/ directory and output a resulting CSS file in the css/ directory.

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

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

Let's analyze this file more carefully. We first imported gulp and gulp-sass so we can have access to all Gulp functions and functions that perform the actual SCSS to CSS conversion. Then we created a task called convert-to-css that takes a *.scss file in scss/, converts it to CSS using gulp-sass, and then outputs it to css/.

To run this task and convert any SCSS to CSS, open a console in the gulfile.js directory and input:

$ gulp convert-to-css

...where convert-to-css is the name of our task. Whenever we want to convert SCSS to CSS, we'll need to run this command. But running this manually every time is tedious. Is there a way to make our conversion automatic ... say every time we save our SCSS file? Yes, of course there is!

To automatically run the convert-to-css task, we'll use Gulp's watch directive. In gulpfile.js, append the following task:

/**
    Run the 'convert-to-css' task whenever a SCSS file in  
    "scss/" is saved.
*/
gulp.task('default', ['convert-to-css'], function() {

    gulp.watch('scss/**/*.scss', ['convert-to-css']);
});

While it is actively running, the default task scans for any changes within the scss directory and calls convert-to-css whenever it detects any changes. This default task is automatically invoked when we run the gulp command, so we don't actually need to specify a name when running it through the console. When you run the following ...

$ gulp

... it should automatically call the default task. If you leave this task open in the background, you'll notice that any time you edit and save your SCSS file, gulp automatically converts your SCSS to CSS.

You now have an automated workflow to convert SCSS to CSS. Have fun coding!