Using Sass & PostCSS Together

Outline

  1. Sass “versus” PostCSS

  2. Sass with PostCSS

  3. Cautions about PostCSS

Sass “versus” PostCSS

PostCSS Is a Preprocessor
(of Sorts…)

Modifies your CSS before it gets to a browser

PostCSS Doesn’t
Replace Preprocessors

Modifies CSS in a different way from other preprocessors

Abstract Syntax Tree Parser

Converts CSS (a string in a file) into a giant object

Allows JS to traverse that object & add/remove/edit

PostCSS alone does nothing to your CSS;
PostCSS plugins make all the changes.

Sass with PostCSS

Advantages of
Sass & Friends

Pre-Built Features

Community Support

Pre-Built Features

  • Variables
  • Conditionals & loops
  • Functions & mixins

Community Support

  • Documentation
  • Conferences & meet-ups
  • Blog posts & tutorials

Advantages of
PostCSS

CSS Manipulation

Custom Syntax

CSS Manipulation

  • Vendor prefixes
  • Syntax clean-up
  • Sorting & shortening

Example: Prefixes

    // Bourbon Mixin for Sass
.element {
  @include transform(rotate(90deg));
}

Example: Prefixes

    /* Autoprefixer */
.element {
  transform: rotate(90deg);
}

Custom Syntax

  • Write custom “CSS” properties
  • Use JS to transform custom properties to valid CSS

Example: Grid Math

    // Neat Mixin for Sass
.element {
  @include span-columns(3 of 12);
}

Example: Grid Math

    /* PostCSS "Grid" Plugin */
.element {
  grid-span: 3, 12;
}

Example: Grid Math

    .element {
  float: left;
  margin-right: 2.3576516%;
  width: 23.2317613%;
}
.element:last-child {
  margin-right: 0;
}

Working Together
IRL

    /* Gulp/Sass packages */
var gulp       = require('gulp');
var glob       = require('glob');
var sass       = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
    
    gulp.task('sass', function() {
gulp.src('src/scss/styles.scss')
  .pipe( sourcemaps.init() )
  .pipe( sass({outputStyle: 'expanded'}) )
  .pipe( sourcemaps.write() )
  .pipe( gulp.dest('src/css/') );
});
    
    /* PostCSS packages */
var postcss  = require('gulp-postcss');
var prefix   = require('autoprefixer');
var cssnano  = require('cssnano');
var sorting  = require('postcss-sorting');
    
    gulp.task('postcss', function() {
var postcss_tools = [
  prefix({browsers: ['last 3 versions']}),
  sorting()
];
if ( is_production )
  postcss_tools.push(cssnano());
gulp.src('src/css/styles.css')
  .pipe( postcss(postcss_tools) )
  .pipe( gulp.dest('src/css/') );
});

Download that Gulpfile

Gist with Sample Code

Practical Tips for PostCSS

Cautions about PostCSS

Avoid Non-CSS Input

Use Sass to turn non-CSS into CSS;
use PostCSS to turn CSS into better CSS.

Be Careful with
“Prolly-Fill” Code

All you’ll ever get from PostCSS is … CSS;
PostCSS can’t make unsupported CSS work.

Cool Plugins for PostCSS

Improve Your CSS

Improve Your CSS More

Analyze Your CSS

Further Reading

Thanks!

👍

James Steinbach

jdsteinbach.com

@jdsteinbach

GH/jdsteinbach