Sass+PostCSS

.gitignore

node_modules

gulpfile.js

(function() {
  'use strict';

  /* Required packages */
  var gulp          = require('gulp');
  var glob          = require('glob');
  var util          = require('gulp-util');

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

  var postcss       = require('gulp-postcss');
  var autoprefixer  = require('autoprefixer');
  var sorter        = require('postcss-sorting');
  var cssnano       = require('cssnano');

  var is_production = !(util.env.dev);

  /* Gulp tasks */

  gulp.task('sass', function() {
    gulp.src('styles.scss')
      .pipe(sass({outputStyle: 'expanded'}))
      .pipe(gulp.dest('.'));
  });

  gulp.task('postcss', function() {
    console.log("PostCSS ran");
    var postcss_tools = [
      autoprefixer({
        browsers: ['last 3 versions'],
        cascade: false
      }),
      sorter({
        'sort-order': 'csscomb'
      })
    ];

    if ( is_production ) postcss_tools.push(cssnano());

    gulp.src('styles.css')
      .pipe(postcss(postcss_tools))
      .pipe(gulp.dest('.'));
  });

  gulp.task('watch', ['sass', 'postcss'], function() {
    gulp.watch('**/*.scss', ['sass']);
    gulp.watch('**/*.css', ['postcss']);
  });
}());

package.json

{
  "name": "sass-postcss",
  "version": "1.0.0",
  "description": "Sample gulp workflow with Sass & PostCSS",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "CSS",
    "Sass",
    "PostCSS"
  ],
  "author": "James Steinbach",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^6.0.2",
    "cssnano": "^3.7.3",
    "glob": "^5.0.14",
    "gulp": "^3.9.0",
    "gulp-postcss": "^6.0.0",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-util": "^3.0.4",
    "postcss-sorting": "^1.6.1"
  }
}

styles.css

#test{font-size:1.65rem;position:absolute;top:50px;display:-webkit-flex;display:-ms-flexbox;display:flex;width:48rem;-webkit-transform:translateX(56%);-ms-transform:translateX(56%);transform:translateX(56%);border:2px solid cornflower}

styles.scss

$blue: cornflower;

#test {
  display: flex;
  top: 50px;
  font-size: 1.65rem;
  width: 48rem;
  position: absolute;
  border: 2px solid $blue;
  transform: translateX(56%);
}