4 мифа о PostCSS

Команда Compass уже прекратила его развитие и тоже считает, что Автопрефиксер работает на порядок лучше.

В общем вы убедили меня попробовать разобраться с PostCSS и "выбросить" Compass. Здесь я опишу свой опыт внедрения.
Сейчас я работаю над проектом, построенном на Django. Всю "статику" я положил в папку public/static/, в которой еще 6 папок: css, fonts, img, js, maps и sass. Перво-наперво установим NodeJS в систему, потом переходим в папку с проектом и спомощью комманды: npm init создаём package.json. Далее через npm install ставим "gulp" (его понадобилось установить два раза — глобально и локально). Далее ставим такой набор модулей: gulp-sass, postcss-scss, gulp-postcss, autoprefixer, postcss-assets, postcss-font-magician, cssnano, postcss-inline-svg, gulp-sourcemaps, gulp-cached.

Далее также в папке проект создаём файл gulpfile.js, в него помещаются задачи для Gulp-а, я для себя сделал так:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var syntax = require('postcss-scss');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer')({browsers: ['last 2 versions']});
var assets = require('postcss-assets')({basePath: 'public/', loadPaths: ['static/img/', 'static/fonts/']});
var fonts = require('postcss-font-magician')();
var cssnano = require('cssnano')();
var inlineSVG = require('postcss-inline-svg')();
var sourcemaps = require('gulp-sourcemaps');
var cache = require('gulp-cached');

gulp.task('devel', function () {
    var pre = [assets, inlineSVG];
    var post = [autoprefixer, fonts];
    return gulp.src('public/static/sass/*.scss')
        .pipe(cache('handled'))
        .pipe(postcss(pre, {syntax: syntax}))
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(post))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('public/static/css'));
});

gulp.task('product', function () {
    var pre = [assets, inlineSVG];
    var post = [autoprefixer, fonts,cssnano];
    return gulp.src('public/static/sass/*.scss')
        .pipe(postcss(pre, {syntax: syntax}))
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(post))
        .pipe(gulp.dest('public/static/css'));
});

gulp.task('watch', function () {
    gulp.watch('public/static/sass/*.scss', ['devel']);
});

gulp.task('default', ['watch', 'devel']);

Как видно из кода я использую две основные задачи, первая — devel, для генерации CSS-стилей во время разработки, вторая для подготовки стилей чтобы отправить в "продакшн", пришлось сделать две так как для минификации стилей я использую cssnano, а он у меня отрабатывает примерно за 20 секунд (не могу сказать много это или мало).
Для разных разделов сайта пишу стили в отдельных файлах (потом django-compress их склеивает в один) и чтобы gulp не обрабатывал зря файлы, которые я "не трогал" использую для этого модуль gulp-cached.

Плагины для PostCSS я разделил на две группы: в первой работают плагины перед компиляцией SASS в CSS, во второй после компиляции. Это я сделал для того, чтобы например, получать размеры картинок и присваивать их переменным (чтобы потом можно было проделывать арифметические операции).

Тепрь в консоли можно дать команду: gulp (или gulp watch) и спокойно кодить стили на SassyCSS (Ураа, я сделал это :-)).
В итоге теперь можно писать примерно такой "стиль":

.table-of-contents {
  $margin-from-icon: 15px;
  $left-pad-item: 70px;
  $marker-width: width('inline/marker_ice.png');
  $marker-height: height('inline/marker_ice.png');
  padding-left: $left-pad-item + $margin-from-icon + $marker-width;
  & > li {
    h3 {
      text-indent: -1 * ($marker-width + $margin-from-icon);
      vertical-align: baseline;
      &::before {
        content: ' ';
        display: inline-block;
        width: $marker-width;
        height: $marker-height;
        margin-right: 15px;
        vertical-align: -5px;
        background: no-repeat inline('inline/marker_ice.png');
      }
    }
  }
}

и вся компиляция в "CSS" происходит очень быстро.