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

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

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