Introduction to PostCSS

1. Sass is Dead
An Intro to PostCSS

2. Everyone is moving to PostCSS

3. Bootstrap is Moving to PostCSS

4. Foundation is moving to PostCSS

5. Google, Twitter, and WordPress
already use PostCSS

6. WHY PostCSS???
1. Features impossible with Sass, LESS, or Stylus
2. Modularity == Faster development
3. Super Fast

7. 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

8. 1. Impossible = Now Possible
• Lost Grid: http://corysimmons.github.io/lost/
• The most elegant grid system of all time

9. Transpile custom code to CSS

10. 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.

11. Lost Syntax: Step 1
• Let’s transpile Lost Syntax into CSS

12. Lost Syntax: Step 2

13. Lost Syntax: Step 3
• The resulting CSS…

14. 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?

15. 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

16. Rapid experimentation
• PostCSS JS Plugins = rapid development
• Already more than 100 plug-
ins:https://github.com/postcss/postcss#plugins

17. Code your own plugin!
If you know how to create a simple
Node module, you can make your
own CSS variables.

18. 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 ==========================>

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

20. 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/