Sass is DeadAn Intro to PostCSS

Everyone is moving to PostCSS

Bootstrap is Moving to PostCSS

Foundation is moving to PostCSS

Google, Twitter, and WordPress already use PostCSS

WHY PostCSS???

1. Features impossible with Sass, LESS, or Stylus2. Modularity == Faster development3. Super Fast

Note:

• The following examples use Gulp 4.0 beta, which has not officially been released.

• While Gulp 4.0 beta is stable, you will have to follow specific instructions to get the beta version working: https://demisx.github.io/gulp4/2015/01/15/install-gulp4.html

1. Impossible = Now Possible

• Lost Grid: http://corysimmons.github.io/lost/

• The most elegant grid system of all time

Transpile custom code to CSS

Transpiler Definition

Compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source

code in another programming language.

Lost Syntax: Step 1

• Let’s transpile Lost Syntax into CSS

Lost Syntax: Step 2

Lost Syntax: Step 3

• The resulting CSS…

2. Modularity

• Preprocessors are currently huge!– Libsass: 110 files, 21 300 lines of C ++ code– Stylus: 72 file 7900 lines of code– Less: 105 files, 9800 lines of code

• Anyone want to contribute to these?

PostCSS plugins

Made up of small JavaScript modules– postcss-nested: 68 lines of code– postcss-simple-vars: 74 lines of code– postcss-mixins: 147 lines of code

Rapid experimentation

• PostCSS JS Plugins = rapid development• Already more than 100 plug-ins:https

://github.com/postcss/postcss#plugins

Code your own plugin!

If you know how to create a simple Node module, you can make your

own CSS variables.

Want to use SASSy syntax?

• Use the PreCSS plugin! https://github.com/jonathantneal/precss

• Only difference between SASS syntax and PreCSS syntax involves mixins

PreCSS dinosaur logo ==========================>

3. Speed

• PostCSS is much faster than all preprocessors.https://github.com/postcss/benchmark#preprocessors

That’s all!

• jumpstart WP theme: https://github.com/elimc/jumpstart

• jumpstart Gulp file: https://github.com/elimc/jumpstart/blob/master/gulpfile.js

• PostCSS Github: https://github.com/postcss/postcss

• Sick PostCSS YouTube video: https://www.youtube.com/watch?v=1yUFTrAxTzg

• Lost Grid: https://github.com/corysimmons/lost

• My site: http://elimcmakin.com/