Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Sass is Dead
An 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 Stylus
2. Modularity == Faster development
3. Super Fast
Note:
• The following examples use Gulp 4.0 beta,
which has not officially been released.
• While Gulp 4.0 beta is stable,...
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 an...
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 l...
PostCSS plugins
Made up of small JavaScript modules
– postcss-nested: 68 lines of code
– postcss-simple-vars: 74 lines of ...
Rapid experimentation
• PostCSS JS Plugins = rapid development
• Already more than 100 plug-
ins:https://github.com/postcs...
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 ...
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/jumps...
Upcoming SlideShare
Loading in …5
×

Sass is dead

3,550 views

Published on

Introduction to PostCSS

Published in: Software
  • Be the first to comment

Sass is dead

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

×