package.json

{
  "name": "trailer",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "browser-sync": "^2.13.0",
    "cssnano": "^3.7.3",
    "cssnext": "^1.8.4",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-util": "^3.0.7",
    "postcss-mixins": "^5.0.0",
    "postcss-nested": "^1.0.0",
    "postcss-partial-import": "^2.0.0",
    "precss": "^1.4.0",
    "sugarss": "^0.1.5"
  }
}

PostCSS gulp file

var gulp = require('gulp');
var sugarss = require('sugarss');
var postcss = require('gulp-postcss');
var rename  = require('gulp-rename');
var gutil = require('gulp-util');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var cssnano = require('cssnano');
var sourcemaps = require('gulp-sourcemaps');


gulp.task('styles', function () {
    return gulp.src('src/css/style.sss')
        .pipe( sourcemaps.init() )
        .pipe(plumber())
        .pipe(postcss([
          require('autoprefixer'),
          require('precss'),
          require('postcss-partial-import'),
          require('postcss-nested'),
          require('cssnano')
           ], {parser: sugarss}))
        .pipe(rename({ extname: '.css' }))
        .pipe( sourcemaps.write('.') )
        .pipe(gulp.dest('build/css'));
});

// Static server
gulp.task('browser-sync', function() {
  browserSync({
      open: false,
      server: {
        baseDir: "./",
      }
  });
});


// Watch
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('src/**/*.sss', ['styles', browserSync.reload]);

  // // Watch .js files
  // gulp.watch(['source/js/**/*.js','source/main.js'], ['scripts', browserSync.reload]);

  // // Watch .html partial files
  // gulp.watch(['source/includes/**/*', 'source/*.html'], ['fileinclude']);

  // // Watch image files
  // gulp.watch('source/img/**/*', ['images']);

  // Watch any files in root html, reload on change
  gulp.watch("*.html", browserSync.reload);

});

gulp.task('default', ['styles', 'browser-sync', 'watch']);