Successfully reported this slideshow.
Your SlideShare is downloading. ×

From Preprocessor to Postprocessor

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Understanding flexbox
Understanding flexbox
Loading in …3
×

Check these out next

1 of 51 Ad

From Preprocessor to Postprocessor

Download to read offline

Il talk ha come scopo raccontare come sia stato dapprima l'introduzione di strumenti di preprocessori come sass/less/stylus e in un secondo momento il passaggio a strumento di postproduzione del css come appunto postcss

Il talk ha come scopo raccontare come sia stato dapprima l'introduzione di strumenti di preprocessori come sass/less/stylus e in un secondo momento il passaggio a strumento di postproduzione del css come appunto postcss

Advertisement
Advertisement

More Related Content

Viewers also liked (20)

Similar to From Preprocessor to Postprocessor (20)

Advertisement

Recently uploaded (20)

Advertisement

From Preprocessor to Postprocessor

  1. 1. FROM PREPROCESSOR TO POSTPROCESSOR
  2. 2. DA DOVE VENIAMO? CHE SIAMO? DOVE ANDIAMO?
  3. 3. PERCHÉ LA FETTA BISCOTTATA CADE SEMPRE DAL LATO IMBURRATO?
  4. 4. LE GRANDI DOMANDE DEL WEBDEV
  5. 5. LE GRANDI DOMANDE DEL WEBDEV QUALE FRAMEWORK JS USO OGGI? QUALE FRAMEWORK JS USO DOMANI?
  6. 6. Matteo Guidotto @j8matteo Project Manager
  7. 7. IL LONTANO 2006 ITALIA CAMPIONE DEL MONDO
  8. 8. IL LONTANO 2006 STAGISTA FULLSTACK
  9. 9. IL LONTANO 2006 ANGOLI TONDI SFONDI GRADIENTI
  10. 10. ANGOLI TONDI
  11. 11. ANGOLI TONDI .round { -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; }
  12. 12. 2010: FLAT DESIGN FTW
  13. 13. 2015 CSSDAY
  14. 14. DA CSS A SASS .area { @include border-radius(10px); @include background- image(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2)); } .area { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-image: -moz-linear- gradient(330deg, #2ac363, #cd8c14, #9c4cc2); background-image: -webkit-linear- gradient(330deg, #2ac363, #cd8c14, #9c4cc2); background-image: linear- gradient(120deg, #2ac363, #cd8c14, #9c4cc2); }
  15. 15. SASS DARK SIDE NO CSS STANDARD BLOCCO MONOLITICO
  16. 16. POSTCSS “PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.”
  17. 17. POSTCSS NON È COSA NON E’ POSTCSS PREPROCESSOR CSS FUTURE SYNTAX POSTPROCESSOR OPTIMIZATION TOOL MINIFIER PLUGIN JQUERY ALL-IN-ONE TOOL LINTER SUBWAY SANDWICH
  18. 18. POSTCSS TOOL PLUGIN ECOSYSTEM
  19. 19. POSTCSS - TOOL
  20. 20. THE MOJO ESSENZIALE VELOCE MODULARE INTEGRABILE
  21. 21. ESSENZIALE Libsass: 110 files, 21 300 LOC of C++ Stylus: 72 files, 7 900 LOC Less: 105 files, 9 800 LOC
  22. 22. VELOCE PostCSS: 39 ms Rework: 73 ms (1.9 times slower) libsass: 77 ms (1.9 times slower) Less: 179 ms (4.5 times slower) Stylus: 269 ms (6.8 times slower) Stylecow: 271 ms (6.9 times slower) Ruby Sass: 1101 ms (28.0 times slower)
  23. 23. MODULARE Agglomerato di plugin 200+ Creare proprio plugin
  24. 24. INTEGRABILE
  25. 25. CIOÈ? border-radius: 10px -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
  26. 26. CIOÈ? border-radius: 10px -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; brad: round10
  27. 27. I PLUGIN - AUTOPREFIXER Display: flex display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex
  28. 28. I PLUGIN - CSSNEXT :root { --color: red; } div { color: var(--color); } div { color: red; }
  29. 29. I PLUGIN - NESTED .phone { &_title { width: 500px; @media (max-width: 500px) { width: auto; } body.is_dark & { color: white; } } img { display: block; } } .phone_title { width: 500px; } @media (max-width: 500px) { .phone_title { width: auto; } } body.is_dark .phone_title { color: white; } .phone img { display: block; }
  30. 30. I PLUGIN - BEM @b nav { /* b is for block */ @e item { /* e is for element */ display: inline-block; } @m placement_header { background-color: red; } } .nav {} .nav__item { display: inline-block } .nav_placement_header { background-color: red }
  31. 31. I PLUGIN - STYLELINT
  32. 32. I PLUGIN PRECSS RTLCSS POSTCSS-FOCUS CSSNANO http://postcss.parts/
  33. 33. HANDS ON npm install gulp-postcss
  34. 34. HANDS ON var gulp = require('gulp'); var postcss = require('gulp-postcss');
  35. 35. HANDS ON gulp.task('css', function () { var processors = [ ]; return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); });
  36. 36. HANDS ON var autoprefixer = require('autoprefixer'); var cssnext = require('cssnext'); var precss = require('precss');
  37. 37. HANDS ON var processors = [ autoprefixer({browsers: ['last 1 version']}), cssnext, precss ];
  38. 38. HANDS ON - PLUGIN brad: round10 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
  39. 39. HANDS ON - PLUGIN var postcss = require('postcss'); module.exports = postcss.plugin('postcss-brad', function (opts) { opts = opts || {}; return function(css) { css.walkDecls(function(decl) { if (decl.prop.match(/^brad$/)) { if (decl.value === "round10") { decl.replaceWith("border-radius:10px"); } } }); }; });
  40. 40. OLTRE GULP GRUNT e WEBPACK CODEPEN CLI NODEJS https://github.com/postcss/postcss
  41. 41. E REACT? let prefixer = postcssJs.sync([ autoprefixer ]); let style = prefixer({ display: 'flex' }); style //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] } https://github.com/postcss/postcss-js
  42. 42. A PICCOLI PASSI? POSTCSS + SASS + AUTOPREFIXER POSTCSS + PRECSS POSTCSS + MODUL*
  43. 43. C’È DA FIDARSI? WORDPRESS TWITTER GOOGLE WIKIPEDIA E 650 milioni di download al mese
  44. 44. LE GRANDI DOMANDE SOLIDO E MONOLITICO O NUOVO E MODULARE
  45. 45. SE STATE PER FARE IL SALTO
  46. 46. PRENDETE BENE LE DISTANZE
  47. 47. GRAZIE! Matteo Guidotto @j8matteo

×