PostCSS 5.0: for Custom CSS Preprocessing

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • ΠΧ:'CSS0830 • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ • PostCSSΤόϯδΣϦετʢࣗশʣ

Slide 3

Slide 3 text

Blog

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

PostCSSͱ͸

Slide 6

Slide 6 text

PostCSS • Node.js੡ͷCSS෩ݴޠύʔαʔ • ASTΛૢ࡞͢ΔศརAPIΛఏڙ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰ • PostCSSࣗମ͸CSSϓϦϓϩηοαʔͰ͸ͳ͍ • ϓϥάΠϯ౳ͷΤίγεςϜ΋ؚΊͯPostCSSͱݺ͹ΕΔ

Slide 7

Slide 7 text

PostCSS'ͱ͸Կ͔ h"ps:/ /speakerdeck.com/jmblog/postcss5tohahe5ka

Slide 8

Slide 8 text

ࠓ೔࿩͢͜ͱ

Slide 9

Slide 9 text

PostCSS'5.0 for$Custom$CSS$Preprocessing

Slide 10

Slide 10 text

The$Beginning$is$...

Slide 11

Slide 11 text

rework Plugin'framework'for'CSS'preprocessing

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

rework&(in&2012) • Autoprefixer͸΋ͱ΋ͱreworkͰ࡞ΒΕ͍ͯͨ • ʢAutoprefixerͱPostCSSͷ࡞ऀ͸ಉ͡ʣ • ͔͠͠౰࣌rework͸ϒϥ΢βϋοΫΛύʔεͰ͖ͳ͔ͬͨ • ʢ͋ͱTJʹAutoprefixerΛdisΒΕͨΓ…ʣ • ʮΑ͠ɺࣗ෼Ͱ࡞Ζ͏ʂʯ

Slide 15

Slide 15 text

PostCSS'஀ੜ

Slide 16

Slide 16 text

The$History$of$PostCSS

Slide 17

Slide 17 text

PostCSSʢʙ'v1ʣ • "PostCSS)is)a)framework)for)CSS)postprocessors" • AutopreﬁxerͷͨΊʹ࡞ΒΕͨ • ͜ͷࠒ͸CoﬀeeScriptͰॻ͔Εͯͨ • ࡞ऀ͸Ruby޷͖ͰSass޷͖

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

PostCSS'5.0 released'on'August'20,'2015

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Custom'Syntaxes • SyntaxΛࣗ෼Ͱఆٛ͠ɺPostCSSͷASTʹύʔεͰ͖Δ • Φϓγϣϯͷ௥Ճ • parser:/ύʔαʔΛબ୒ • stringifier:/Ξ΢τϓοτͷॲཧΛબ୒ • syntax:/parser/+/stringifier postcss().process(source, { syntax: scss })

Slide 23

Slide 23 text

Custom'Syntaxes • postcss'scss • SCSS༻ͷPostCSS+Syntax • PostCSSͰSCSSϑΝΠϧΛCSSʹίϯύΠϧͰ͖ΔΑ͏ʹ ͳͬͨΘ͚Ͱ͸ͳ͍ • SCSS+to+CSSͷίϯύΠϥʢϓϥάΠϯύοΫʣΛ࡞ͬͯΔਓ ͕͍ΔΒ͍͠

Slide 24

Slide 24 text

Custom'Syntaxes • for%CSS(in(JS • JSΦϒδΣΫτΛPostCSS%ASTʹม׵ • React%Style%Autopreﬁxer • Styling

Slide 25

Slide 25 text

PostCSS'is'Awesome!!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

@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; }