PostCSS 5.0: for Custom CSS Preprocessing

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_