sass is dead
TRANSCRIPT
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/