Using Sass & PostCSS Together

Outline

  1. Sass “versus” PostCSS

  2. Sass with PostCSS

  3. Practical Tips for PostCSS

Sass “versus” PostCSS

PostCSS Is a Preprocessor
(of Sorts…)

Modifies your CSS before that CSS gets to a browser

PostCSS Doesn’t
Replace Preprocessors

Modifies CSS in a different way from other preprocessors

Abstract Syntax Tree Parser

            .element {
  display: inline-block;
  padding: 1em 2em;
  color: #447;
}
.other-element {
  border: 1px solid currentColor;
  margin: 1em auto;
  color: #844;
}
          

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