$30 off During Our Annual Pro Sale. View Details »

PostCSS 5.0: for Custom CSS Preprocessing

PostCSS 5.0: for Custom CSS Preprocessing

at Back to Basics, CSS event in Japan

Masaaki Morishita

August 30, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. Blog

    View Slide

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

    View Slide

  5. PostCSSͱ͸

    View Slide

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

    View Slide

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

    View Slide

  8. ࠓ೔࿩͢͜ͱ

    View Slide

  9. PostCSS'5.0
    for$Custom$CSS$Preprocessing

    View Slide

  10. The$Beginning$is$...

    View Slide

  11. rework
    Plugin'framework'for'CSS'preprocessing

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. PostCSS'஀ੜ

    View Slide

  16. The$History$of$PostCSS

    View Slide

  17. PostCSSʢʙ'v1ʣ
    • "PostCSS)is)a)framework)for)CSS)postprocessors"
    • AutoprefixerͷͨΊʹ࡞ΒΕͨ
    • ͜ͷࠒ͸CoffeeScriptͰॻ͔Εͯͨ
    • ࡞ऀ͸Ruby޷͖ͰSass޷͖

    View Slide

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

    View Slide

  19. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. Custom'Syntaxes
    • for%CSS(in(JS
    • JSΦϒδΣΫτΛPostCSS%ASTʹม׵
    • React%Style%Autoprefixer
    • Styling

    View Slide

  25. PostCSS'is'Awesome!!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. (")

    View Slide

  30. CSS๊͕͑Δ໰୊͸Կ͔

    View Slide

  31. ந৅Խͱ࠶ར༻ʁ
    ΧεέʔσΟϯάͱηϨΫλʔৄࡉ౓ʁ

    View Slide

  32. ϓϦϓϩηοαʔ͸Ͳ͏͋Δ΂͖͔

    View Slide

  33. ಓ۩ʹৼΓճ͞Εͣɺຊ࣭ΛݟΔ

    View Slide

  34. Back%to%Basics

    View Slide

  35. Thanks':D
    @morishi(er_

    View Slide