Upgrade to Pro — share decks privately, control downloads, hide ads and more …

この先生きのこるためのPostCSS実践入門

 この先生きのこるためのPostCSS実践入門

Frontend de KANPAI! #frokan LT枠での資料です。

60775fff9467dfa6fa158228010a26df?s=128

Pちゃん

June 21, 2017
Tweet

Transcript

  1. ͜ͷઌੜ͖ͷ͜ΔͨΊͷ PostCSS࣮ફೖ໳ Shintaro Fujiwara DeNA Co., Ltd. / Design Strategies

    Office
  2. ! ࣗݾ঺հ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣗݾ঺հ

  3. ! ࣗݾ঺հ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ౻ݪ৻ଠ࿠ a.k.a. P-Chan " UI Design

    / Front-End # DeNA Co., Ltd. $ MyAnimeList.net
  4. ! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ PostCSSͱ͸

  5. ! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ en) PostCSS is a tool for

    transforming styles with JS plugins. ja) PostCSS͸ɺJSϓϥάΠϯͰελΠϧΛม׵͢ΔͨΊͷπʔϧ PostCSSͱ͸ input CSS CSS PostCSS Plugin " " PostCSS Plugin # Input CSS # Output CSS $ PostCSS Plugin " " PostCSS
  6. ! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ جຊతʹ͸ɺ֤छϓϥάΠϯΛ͍ΕΔ͜ͱʹΑͬͯɺ༷ʑͳγϯλοΫ ε͕࢖͑ΔΑ͏ʹͳΓ·͢ɻ ٯʹݴ͏ͱɺԿ΋ೖΕͳ͚Ε͹ɺͦͷ··ͷελΠϧγʔτ͕ు͖ग़͞ Ε·͢ɻ input CSS

    CSS PostCSS Plugin " " PostCSS Plugin # Input CSS # Output CSS $ PostCSS Plugin " " input CSS PostCSS Plugin # Input CSS # Output CSS #
  7. ! 1PTU$44ͱ͸ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣍ੈ୅ඪ४Ͱॻͨ͘ΊͷτϥϯεύΠϥʔ ࠓͷͱ͜ΖɺҰ൪ϝδϟʔͳ࢖ΘΕํ͸ʮϓϥάΠϯΛ૊Έ߹Θͤͯɺ ࣍ੈ୅ඪ४ $44 $44 Λݱࡏͷϒϥ΢βͰ࢖͑ΔΑ͏ʹ͠Α͏ʯ

    ͱ͍͏΋ͷͰ͢ɻ +4ք۾Ͱىͬͨ͜ʮ࣍ੈ୅ඪ४Λݱࡏͷϒϥ΢βͰ࢖͑ΔΑ͏ʹ͠Α ͏ʯͷྲྀΕͱಉ͡΋ͷͷΑ͏ʹײ͡·͢ɻ ࠓͷͱ͜Ζɺ࣍ੈ୅ඪ४Ͱ໨ۄͳػೳͱݴ͑͹ɺWBS ม਺ ͱ͔ !BQQMZ ม਺ηοτ ͱ͔DBMD ԋࢉ ͱ͔Ͱ͢ɻ
  8. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ϓϥάΠϯΛબͿ

  9. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ϚδͰແ਺ͷϓϥάΠϯ͕ଘࡏ͢Δ

  10. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ precss PostCSSͰSASSͬΆ͍ॻ͖ํͰ͖ΔΑ͏ʹ͢Δ΍ͭ

  11. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ sugarss ΠϯσϯτϕʔεͷγϯλοΫεͰ͔͚ΔΑ͏ʹͳΔ

  12. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ޷͖উख΍Δͱ ΅͘ͷ͔Μ͕͍͖͑ͨ͞ΐ͏ͷ ͠ʔ͑͠Ύ͑͠Ύ΀Γ΀Ζͤͬ͞ʔ ͕Ͱ͖͕͋Δ

  13. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ൒೥ޙʹ͸ɺ͢Ͱʹਏ͘ͳͬͯͦ͏

  14. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ͜ͷઌੜ͖ͷ͜Δ ϓϥάΠϯ͚͕ͩΠΠͳʜ"

  15. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ postcss-cssnext ࣍ੈ୅ඪ४Ͱॻ͚ΔΑ͏ʹͳΔϓϥάΠϯΛηοτʹͨ͠΍ͭ

  16. ! ϓϥάΠϯΛબͿ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞

  17. ! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ Ͱ΋ɺ4BTTͷ΄͏͕ڧ͘ͳ͍ʁ 1PTU$44ͷ࿩Λ͢ΔͱɺඞͣҾ͖߹͍ʹग़͞ΕΔͷ͕4BTTͰ͢ɻ ʮ4BTTͷ΄͏͕ͭΑ͘ͳ͍ʁ4BTTͰΑ͘ͳ͍ʁʯͱݴΘΕ·͢ɻ ͓ͬ͠ΌΔͱ͓Γɺ4BTTͷ΄͏͕ͭΑ͍Ͱ͢ɻ

  18. ! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ 4BTT͸͔֬ʹͭΑ͍Ͱ͢ɻ ͔͠͠ɺ࣍ੈ୅ඪ४Ͱ͋Δͱ͍͏͜ͱʹ͸ɺҎԼͷΑ͏ͳϝϦοτ͕͋ Γ·͢ɻ ௕ظతͳαϙʔτ WTBMUYYY

    ࣍ʑੈ୅ඪ४΁ͷҠߦίετͷ௿͞ ΤίγεςϜͷྲྀߦΓ΍͢͞ τϥϯεύΠϧແ͠Ͱಈ͘ະདྷ͕དྷΔ ͨͩ͠ ྲྀߦΕ͹ڧ͍ػೳ͕૿͑Δ
  19. ! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ ඪ४ͰԺ΍͔ΛखʹೖΕΔ ݸਓతʹ͸ɺʮͰ͖Δ͚ͩඪ४తͳٕज़Ͱ΍͍ͬͯ͘΄͏͕ɺԺ΍͔ʹ ੜ͖͍͚ͯΔʯͱࢥ͍ͬͯΔͷͰɺ͜Ε͔Β͸Ͱ͖Δ͚ͩ1PTU$44Λ ࢖͍ͬͯ͜͏ͱࢥ͍ͬͯ·͢ɻ ੋඇɺΈͳ͞Μ΋࢖ͬͯΈ͍ͯͩ͘͞"

  20. ! ࣍ੈ୅ඪ४Ͱ͋Δ͜ͱͷͭΑ͞ ͜ͷઌੜ͖ͷ͜ΔͨΊͷ 1PTU$44࣮ફೖ໳ " ͓͠·͍