at Back to Basics, CSS event in Japan
PostCSS'5.0for$Custom$CSS$Preprocessingin#Back#to#Basics
View Slide
About&me• Masaaki'Morishita• Twi.er:'@morishi.er_• GitHub:'morishi.er• ΠΧ:'CSS0830• αΠόʔΤʔδΣϯτʢ৽ଔ1ʣ• PostCSSΤόϯδΣϦετʢࣗশʣ
Blog
PostCSSͰ࡞ͬͨͷ• CSSfmt:((S)CSSίʔυܗπʔϧ• AtCSS:(΅͕͔͘Μ͕͍͖͑ͨ͞ΐ͏ͷCSSϓϦϓϩηοαʔ• postcss0style0guide:(ελΠϧΨΠυδΣωϨʔλʔ• ଞϓϥάΠϯ7ͭ
PostCSSͱ
PostCSS• Node.jsͷCSS෩ݴޠύʔαʔ• ASTΛૢ࡞͢ΔศརAPIΛఏڙ• ASTͷૢ࡞શͯϓϥάΠϯ͕୲• PostCSSࣗମCSSϓϦϓϩηοαʔͰͳ͍• ϓϥάΠϯͷΤίγεςϜؚΊͯPostCSSͱݺΕΔ
PostCSS'ͱԿ͔h"ps://speakerdeck.com/jmblog/postcss5tohahe5ka
ࠓ͢͜ͱ
PostCSS'5.0for$Custom$CSS$Preprocessing
The$Beginning$is$...
reworkPlugin'framework'for'CSS'preprocessing
Modular(CSS(preprocessing(with(reworkh"p://tjholowaychuk.tumblr.com/post/44267035203/modular=css=preprocessing=with=rework
Custom'CSS'preprocessingh"p://nicolasgallagher.com/custom4css4preprocessing/
rework&(in&2012)• AutoprefixerͱͱreworkͰ࡞ΒΕ͍ͯͨ• ʢAutoprefixerͱPostCSSͷ࡞ऀಉ͡ʣ• ͔࣌͠͠reworkϒϥβϋοΫΛύʔεͰ͖ͳ͔ͬͨ• ʢ͋ͱTJʹAutoprefixerΛdisΒΕͨΓ…ʣ• ʮΑ͠ɺࣗͰ࡞Ζ͏ʂʯ
PostCSS'ੜ
The$History$of$PostCSS
PostCSSʢʙ'v1ʣ• "PostCSS)is)a)framework)for)CSS)postprocessors"• AutoprefixerͷͨΊʹ࡞ΒΕͨ• ͜ͷࠒCoffeeScriptͰॻ͔Εͯͨ• ࡞ऀRuby͖ͰSass͖
PostCSS'(v2'ʙ'v4)• ϓϥάΠϯ͕େྔʹ࡞ΒΕ͍ͯ͘• ݴޠ֦ுͷͨΊͷϓϥάΠϯ࡞ΒΕ͍ͯ͘• cssnext,)AtCSS,)PreCSS• ʮϙετϓϩηεͱ͍͍ͬͨ…ʯ
PostCSS'5.0released'on'August'20,'2015
PostCSS'5.0• ࠓ·ͰͰҰ൪େ͖͍มߋ• API໊͕มߋ• Node.js,v0.10ͷαϙʔτ͕ͳ͘ͳΔ• Custom'Syntaxes
Custom'Syntaxes• SyntaxΛࣗͰఆٛ͠ɺPostCSSͷASTʹύʔεͰ͖Δ• ΦϓγϣϯͷՃ• parser:/ύʔαʔΛબ• stringifier:/ΞτϓοτͷॲཧΛબ• syntax:/parser/+/stringifierpostcss().process(source, { syntax: scss })
Custom'Syntaxes• postcss'scss• SCSS༻ͷPostCSS+Syntax• PostCSSͰSCSSϑΝΠϧΛCSSʹίϯύΠϧͰ͖ΔΑ͏ʹͳͬͨΘ͚Ͱͳ͍• SCSS+to+CSSͷίϯύΠϥʢϓϥάΠϯύοΫʣΛ࡞ͬͯΔਓ͕͍ΔΒ͍͠
Custom'Syntaxes• for%CSS(in(JS• JSΦϒδΣΫτΛPostCSS%ASTʹม• React%Style%Autoprefixer• Styling
PostCSS'is'Awesome!!
※͔͜͜ΒݸਓͷײͰ͢
CSSͷಠࣗه๏Λ࡞ͬͯํͳ͍݁ہͲΕͨͩͷγϯλοΫεγϡΨʔ
@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;}
(")
CSS๊͕͑ΔԿ͔
நԽͱ࠶ར༻ʁΧεέʔσΟϯάͱηϨΫλʔৄࡉʁ
ϓϦϓϩηοαʔͲ͏͋Δ͖͔
ಓ۩ʹৼΓճ͞Εͣɺຊ࣭ΛݟΔ
Back%to%Basics
Thanks':D@morishi(er_