Frontend Workflow

By Raymon Schouwenaar

Preprocess your 

Sass

#3

Frontend Workflow

By Raymon Schouwenaar

Make sure you installed these packages locally

• Gulp

• Browser-sync

• Gulp-sass

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

Run this command in your terminal

#3

Frontend Workflow

By Raymon Schouwenaar

Let's creat our Gulpfile.js

#3

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('src/sass/style.scss')
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest('dist/resoure/css'))
        .pipe(browserSync.stream());
});

gulp.task('serve', function() {
    browserSync.init({
        server: "./"
    });
});

gulp.task('default', ['serve', 'sass'], function () {
    gulp.watch('src/css/*.scss', ['sass']);
    gulp.watch('./index.html').on('change', browserSync.reload);
});

Frontend Workflow

By Raymon Schouwenaar

Run this command to test the Sass

#3

$ gulp sass

Run this command in your terminal

Your Sass/Scss files should now compile to CSS files

Frontend Workflow

By Raymon Schouwenaar

Run this command

#3

$ gulp

Run this command in your terminal

This should run the localhost server and run the compiling of your Sass/Scss

Frontend Workflow

By Raymon Schouwenaar

Let's do something with Sass

#3

Frontend Workflow

By Raymon Schouwenaar

#3

Create an _variables.scss file in the sass/modules folder

$white: #fff;

Frontend Workflow

By Raymon Schouwenaar

#3

Add the import to style.scss

@import 'modules/variables';

body {
    background: blue;
    color: $white;
}
.content {
    padding: 1em;
    background: #ccc;
}
.content h1 {
    font-size: 5em;
}

Frontend Workflow

By Raymon Schouwenaar

#3

Run this command

$ gulp

Run this command in your terminal

Your Sass/Scss files should now compile to CSS files. The $white variable should be created as #fff