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