PostCSS 5.0: for Custom CSS Preprocessing

at Back to Basics, CSS event in Japan

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 • ʮϙετϓϩηεͱ͸͍͍ͬͨ…ʯ
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_