Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PostCSS 5.0: for Custom CSS Preprocessing

PostCSS 5.0: for Custom CSS Preprocessing

at Back to Basics, CSS event in Japan

Masaaki Morishita

August 30, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

  1. PostCSS'5.0 for$Custom$CSS$Preprocessing in#Back#to#Basics

  2. About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • ΠΧ:'CSS0830 •

    αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ • PostCSSΤόϯδΣϦετʢࣗশʣ
  3. Blog

  4. PostCSSͰ࡞ͬͨ΋ͷ • CSSfmt:((S)CSSίʔυ੔ܗπʔϧ • AtCSS:(΅͕͔͘Μ͕͍͖͑ͨ͞ΐ͏ͷCSSϓϦϓϩηοαʔ • postcss0style0guide:(ελΠϧΨΠυδΣωϨʔλʔ • ଞϓϥάΠϯ7ͭ

  5. PostCSSͱ͸

  6. PostCSS • Node.js੡ͷCSS෩ݴޠύʔαʔ • ASTΛૢ࡞͢ΔศརAPIΛఏڙ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰ • PostCSSࣗମ͸CSSϓϦϓϩηοαʔͰ͸ͳ͍ •

    ϓϥάΠϯ౳ͷΤίγεςϜ΋ؚΊͯPostCSSͱݺ͹ΕΔ
  7. PostCSS'ͱ͸Կ͔ h"ps:/ /speakerdeck.com/jmblog/postcss5tohahe5ka

  8. ࠓ೔࿩͢͜ͱ

  9. PostCSS'5.0 for$Custom$CSS$Preprocessing

  10. The$Beginning$is$...

  11. rework Plugin'framework'for'CSS'preprocessing

  12. Modular(CSS(preprocessing( with(rework h"p:/ /tjholowaychuk.tumblr.com/post/ 44267035203/modular=css=preprocessing=with= rework

  13. Custom'CSS'preprocessing h"p:/ /nicolasgallagher.com/custom4css4 preprocessing/

  14. rework&(in&2012) • Autoprefixer͸΋ͱ΋ͱreworkͰ࡞ΒΕ͍ͯͨ • ʢAutoprefixerͱPostCSSͷ࡞ऀ͸ಉ͡ʣ • ͔͠͠౰࣌rework͸ϒϥ΢βϋοΫΛύʔεͰ͖ͳ͔ͬͨ • ʢ͋ͱTJʹAutoprefixerΛdisΒΕͨΓ…ʣ •

    ʮΑ͠ɺࣗ෼Ͱ࡞Ζ͏ʂʯ
  15. PostCSS'஀ੜ

  16. The$History$of$PostCSS

  17. PostCSSʢʙ'v1ʣ • "PostCSS)is)a)framework)for)CSS)postprocessors" • AutoprefixerͷͨΊʹ࡞ΒΕͨ • ͜ͷࠒ͸CoffeeScriptͰॻ͔Εͯͨ • ࡞ऀ͸Ruby޷͖ͰSass޷͖

  18. PostCSS'(v2'ʙ'v4) • ϓϥάΠϯ͕େྔʹ࡞ΒΕ͍ͯ͘ • ݴޠ֦ுͷͨΊͷϓϥάΠϯ΋࡞ΒΕ͍ͯ͘ • cssnext,)AtCSS,)PreCSS • ʮϙετϓϩηεͱ͸͍͍ͬͨ…ʯ

  19. None
  20. PostCSS'5.0 released'on'August'20,'2015

  21. PostCSS'5.0 • ࠓ·ͰͰҰ൪େ͖͍มߋ • API໊͕มߋ • Node.js,v0.10ͷαϙʔτ͕ͳ͘ͳΔ • Custom'Syntaxes

  22. Custom'Syntaxes • SyntaxΛࣗ෼Ͱఆٛ͠ɺPostCSSͷASTʹύʔεͰ͖Δ • Φϓγϣϯͷ௥Ճ • parser:/ύʔαʔΛબ୒ • stringifier:/Ξ΢τϓοτͷॲཧΛબ୒ •

    syntax:/parser/+/stringifier postcss().process(source, { syntax: scss })
  23. Custom'Syntaxes • postcss'scss • SCSS༻ͷPostCSS+Syntax • PostCSSͰSCSSϑΝΠϧΛCSSʹίϯύΠϧͰ͖ΔΑ͏ʹ ͳͬͨΘ͚Ͱ͸ͳ͍ • SCSS+to+CSSͷίϯύΠϥʢϓϥάΠϯύοΫʣΛ࡞ͬͯΔਓ

    ͕͍ΔΒ͍͠
  24. Custom'Syntaxes • for%CSS(in(JS • JSΦϒδΣΫτΛPostCSS%ASTʹม׵ • React%Style%Autoprefixer • Styling

  25. PostCSS'is'Awesome!!

  26. ※͔͜͜Β͸ݸਓͷײ૝Ͱ͢

  27. CSSͷಠࣗه๏Λ࡞ͬͯ΋࢓ํͳ͍ ݁ہͲΕ΋ͨͩͷγϯλοΫεγϡΨʔ

  28. @function halfSize($value) { @return $value / 2; } $val: 100px;

    :root { // Main theme color --color: red; } .foo { width: halfSize($val); } .bar { color: var(--color); padding: $val / 10; }
  29. (")

  30. CSS๊͕͑Δ໰୊͸Կ͔

  31. ந৅Խͱ࠶ར༻ʁ ΧεέʔσΟϯάͱηϨΫλʔৄࡉ౓ʁ

  32. ϓϦϓϩηοαʔ͸Ͳ͏͋Δ΂͖͔

  33. ಓ۩ʹৼΓճ͞Εͣɺຊ࣭ΛݟΔ

  34. Back%to%Basics

  35. Thanks':D @morishi(er_