How to style using SASS: Setting up workflow

CSS is for styling HTML/XML documents. Sometimes writting CSS rules over and over again may become boring and time consuming. Small change in an element can make you edit a lot of lines. This is where SASS comes handy. SASS is called CSS with superpowers, As it gives CSS the power of programming the workflow.

In Sass you have all the goodies of CSS plus few functions on top of it. It’s easy to learn and extends CSS.

Let’s talk about how you can get on with your Sass journey by setting up the workflow: In this tutorial, we will use a build automation tool called gulp. Gulp helps automate the tasks. So, what will Gulp do here? With gulp script we can watch the files and automatically trigger Sass compiling process and refresh the browser on each change on the files.

Now, I am not gonna talk about nitty-gritty of a Gulp config file. You can read Gulp documentation to learn a lot about it. I am just giving you a simple sass starter script. You may customize it as you use it for development tasks.

First, we create our project directory and initialize a npm package on it. $ npm init -y This will quickly create a package.json file which is needed for installing packages.

We now install necessary npm dependencies for this starter script. $ npm i gulp gulp-sass gulp-postcss gulp-sourcemaps autoprefixer browser-sync Then create a gulp config in a file named Gulpfile.js :

'use strict';

let gulp = require('gulp');
let postcss = require('gulp-postcss');
let autoprefixer = require('autoprefixer');
let sass = require('gulp-sass');
let sourcemaps = require('gulp-sourcemaps');
let browserSync = require('browser-sync').create();

let config = {
    paths: {
        src:  '.'
    }
};

// CSS
gulp.task('sass', function () {
    return gulp.src(config.paths.src + '/assets/scss/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([ autoprefixer({ browsers: [
          'Chrome >= 35',
          'Firefox >= 38',
          'Edge >= 12',
          'Explorer >= 10',
          'iOS >= 8',
          'Safari >= 8',
          'Android 2.3',
          'Android >= 4',
          'Opera >= 12']})]))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.paths.src + '/assets/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
        .pipe(gulp.dest(config.paths.src + '/assets/css'));
});

gulp.task('sass:watch', function (done) {
    gulp.watch(config.paths.src + '/assets/scss/**/*.scss', gulp.series('sass'));
    done();
});

gulp.task('files:watch', function (done) {
    gulp.watch(config.paths.src + '/*.html').on('change', browserSync.reload);
    done();
});

// Live-reload
gulp.task('browserSync', function () {
    browserSync.init({
        server: {
            baseDir: config.paths.src
        },
    });
});

gulp.task('watch',
            gulp.parallel('sass:watch', 'files:watch'));

gulp.task('serve',
            gulp.series('sass',
            gulp.parallel('watch', 'browserSync')));

gulp.task('default',
            gulp.series('serve'));

Now, set up directory structure:

.
+-- assets
|   +-- css
|   +-- scss
|       +-- main.scss
+-- index.html
+-- Gulpfile.js
+-- packages.json

The above show the directory structure for your Sass project. Finally add command gulp as a start script on the package.json file.

"scripts": {
    "start": "gulp"
  }

For those who don’t want to go through the setup manually, I have created a GitHub repo for starting a Sass project.