PostCSS 5.0: for Custom CSS Preprocessing

PostCSS 5.0: for Custom CSS Preprocessing

at Back to Basics, CSS event in Japan

3cf7515c93d2f278420f0147788c8e23?s=128

Masaaki Morishita

August 30, 2015
Tweet

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_