sass is dead
TRANSCRIPT
![Page 1: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/1.jpg)
Sass is DeadAn Intro to PostCSS
![Page 2: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/2.jpg)
Everyone is moving to PostCSS
![Page 3: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/3.jpg)
Bootstrap is Moving to PostCSS
![Page 4: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/4.jpg)
Foundation is moving to PostCSS
![Page 5: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/5.jpg)
Google, Twitter, and WordPress already use PostCSS
![Page 6: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/6.jpg)
WHY PostCSS???
1. Features impossible with Sass, LESS, or Stylus2. Modularity == Faster development3. Super Fast
![Page 7: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/7.jpg)
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
![Page 8: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/8.jpg)
1. Impossible = Now Possible
• Lost Grid: http://corysimmons.github.io/lost/
• The most elegant grid system of all time
![Page 9: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/9.jpg)
Transpile custom code to CSS
![Page 10: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/10.jpg)
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.
![Page 11: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/11.jpg)
Lost Syntax: Step 1
• Let’s transpile Lost Syntax into CSS
![Page 12: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/12.jpg)
Lost Syntax: Step 2
![Page 13: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/13.jpg)
Lost Syntax: Step 3
• The resulting CSS…
![Page 14: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/14.jpg)
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?
![Page 15: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/15.jpg)
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
![Page 16: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/16.jpg)
Rapid experimentation
• PostCSS JS Plugins = rapid development• Already more than 100 plug-ins:https
://github.com/postcss/postcss#plugins
![Page 17: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/17.jpg)
Code your own plugin!
If you know how to create a simple Node module, you can make your
own CSS variables.
![Page 18: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/18.jpg)
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 ==========================>
![Page 19: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/19.jpg)
3. Speed
• PostCSS is much faster than all preprocessors.https://github.com/postcss/benchmark#preprocessors
![Page 20: Sass is dead](https://reader036.vdocument.in/reader036/viewer/2022062401/58ed3a8b1a28aba6758b461f/html5/thumbnails/20.jpg)
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/