まだCSSで消耗したい？Sassを覚えて楽しちゃおう！

社内向け勉強会で作ったスライド

1. ·ͩCSSͰফ໣͍ͨ͠ʁ SassΛָ֮͑ͯͪ͠Ό͓͏ʂ 2017.10.14 Obara Chiaki
2. ਖ਼௚ɺCSS໘౗͡Όͳ͍Ͱ͔͢ʁ
3. ࢲ͸໘౗Ͱ͢ʂʂ ͲͷCSSʹϕϯμʔϓϨϑΟοΫε͕ʔͱ͔ɺ
 ϝσΟΞΫΤϦʔ͕ʔͱ͔ɺ͋ͬɺ͜͜શ෦ม ΘΔ͚Ͳॻ͖׵͑େมɾɾɾͱ͔ɺ΋͏ߟ͑Δ ͷ΋ΠϠʹͳ͖ͬͯ·͢Ͷʂ
5. Sassʢαεʣ CSSϓϦϓϩηοαͱ͍͏΋ͷͰ͢ɻ Syntactically Awesome StyleSheetͷུΒ͍͠Ͱ ͢ɻ ͳΜͩ͜Ε͸ʁͰ͢ͶɻCSSΛॻ͘ͱ͖ʹ ͪΐͬͱศརʹͯ͘͠ΕΔπʔϧΈ͍ͨͳ΋ͷ Ͱ͢ʂ
6. Ͱ΋೉͍͠ΜͰ͠ΐ͏ʁ
7. ೉͘͠ͳ͍ͱ͸ݴΘͳ͍ ৽͍͠΋ͷʹ͸ษڧίετ͕͍Γ·͢ɻ
 ͨͩɺࢲ͕SassΛ͓͢͢Ί͢Δͷ͸ͦ͜·Ͱߴ ͍ษڧίετ͸ඞཁͳ͍͔ΒͰ͢ɻ ࠷ॳʹݴ͍·͢ɻʮͱ͋ΔπʔϧΛىಈͯ͠ filename.cssΛfilename.scssʹϦωʔϜ͢Δʯ ͚ͩͰಋೖ͚ͩ͸׬ྃ͠·͢ɻ
8. ͱ͋Δπʔϧʁ
9. Prepros
10. PreprosʢϓϦϓϩεʣ Sass͸ͦͷ··HTMLͰಡΈࠐ·ͤͯ΋CSSͱ͠ ͯ࢖͏͜ͱ͕Ͱ͖·ͤΜɻ
 ͦ͜Ͱɺfilename.scssͰॻ͍ͨCSSΛɺ filename.cssʹίϯύΠϧʢม׵ʣͯ͋͛͠Δඞ ཁ͕͋Γ·͢ɻ ͦͷίϯύΠϧΛͯ͘͠ΕΔͷ͕PreprosͰ͢ɻ
11. ॳΊͯʹ͸࠷దʂ ࢲ΋࠷ॳSassΛ৮ͬͨͱ͖ɺPreprosΛ࢖͍·͠ ͨʂ৽͍͜͠ͱϠμ…ۤख…ͱ͍͏ํ΋ɺ͋· Γߏ͑ͣʹͱΓ͋͑ͣݟΔ͚ͩݟͯΈ·͠ΐ͏ɻ
12. PreprosͷςʔϚΧϥʔ LightͰ΋DarkͰ΋޷͖ͳํΛબͼ·͢
13. ࠨԼͷAdd ProjectͰ௥Ճ ΋͘͠͸͜ͷը໘ʹϑΥϧμυϩοϓ
14. ͋ͱ͸ී௨ʹCSSΛॻ͘ .sample { display: flex; } .example { text-align: center; }
15. CSSϑΥϧμͷதʹࣗಈੜ੒ OUTPUT PATHͰੜ੒ઌΛมߋՄೳʂ
16. ͱΓ͋͑ͣॻ͍ͯΈΔίπ • ී௨ʹࠓ·Ͱ௨ΓCSSΛॻ͚͹OK • ͨͩɾɾɾϕϯμʔϓϨϑΟοΫε͸ॻ͔ͳ͘ ͯOKʂCSSʹίϯύΠϧͨ͠ͱ͖ʹউखʹ଍ ͞Ε͍ͯ·͢ʂ˞ ※ͨͩ͠ɺͲ͔͜ΒͲ͜·Ͱͷϒϥ΢βΛݟΔ͔͸ࢦఆͯ͋͛͠Δͱ٢
17. Settings͔Βมߋ Other SettingsͷAutoprefixer
18. !!CAUTION!!
19. .scssͰॻ͘ͳΒ.css͸๨ΕΑ͏ filename.scss͔Βfilename.css΁ͷίϯύΠϧ͸ Ͱ͖·͕͢ɺ࢒೦ͳ͕Βfilename.css͔Β filename.scss΁ͷίϯύΠϧ͸Ͱ͖·ͤΜʂ
 cssϑΝΠϧಠࣗʹ௥هͯ͠΋ɺscssϑΝΠϧΛί ϯύΠϧ͢Δͱcssʹॻ͍ͨ಺༰͸ফ͑ͯ͠·͏ͷ Ͱɺcss͸ݟΔ͚ͩͷ΋ͷͱೝࣝΛվΊ·͠ΐ͏ɻ
20. ͑ɺશવָʹͳͬͯͳ͍
21. ͖ͬ͞ݴͬͨ͜ͱ ʮͱ͋ΔπʔϧΛىಈͯ͠filename.cssΛ filename.scssʹϦωʔϜ͢Δʯ͚ͩͰಋೖ͚ͩ ͸׬ྃ͠·͢ɻ
22. ͖ͬ͞ݴͬͨ͜ͱ ʮͱ͋ΔπʔϧΛىಈͯ͠filename.cssΛ filename.scssʹϦωʔϜ͢Δʯ͚ͩͰಋೖ͚ͩ ͸׬ྃ͠·͢ɻ ͭ·Γɺָ͢ΔͨΊʹ͸΋͏ͪΐͬͱ֮͑Δ͜ ͱ͕͋Γ·͢ɻ
23. ָ͢ΔͨΊͷ͋Ε͜Ε
24. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ
 ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ ଞʹ΋৭ʑ͋Γ·͕͢ͱΓ͋͑ͣ͜Ε͚ͩͰ΋࢖͑Δͱ௒˒ָͰ͢ɻ
25. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ
 ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ
26. ೖΕࢠͰॻ͚Δͱ͸ʁ // style.scss .example { text-align: center; p { font-size: 1.3rem; } &__child { font-size: 3rem; } }
27. CSSʹίϯύΠϧ͢Δͱ… // style.css .example { text-align: center; } .example p { font-size: 1.3rem; } .example__child { font-size: 3rem; }
28. ೖΕࢠʢωετʣͷϝϦοτ • ϝϯςφϯεੑ͕޲্͢Δ • هड़ྔ͕ݮΔʹλΠϙ΋ݮΔ • ͨͩ͠ɺೖΕࢠΛਂ͗͘͢͠Δͱৄࡉ౓্͕ ͕ΔͷͰ΄Ͳ΄Ͳʹɻ
29. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ
 ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ
30. ม਺ͱ͸ʁ // style.scss $mainColor: #fff;
31. $ϚʔΫ͕ม਺ͷূ $hoge: ਺஋ͱ͔৭ʑ;
 ͱ͍͏ॻ͖ํΛ͢Δͱม਺ѻ͍ʹͳΓ·͢ɻ ม਺ʹͨ͠ΒԿ͕ศརͳͷͰ͠ΐ͏ʁ
32. ಉ͡ࢦఆΛ܁Γฦ͠࢖͑Δ // style.scss $mainColor: #fff; .example { color: $mainColor; p { background: $mainColor; color: #000; } }
33. ಉ͡ࢦఆΛ܁Γฦ͠࢖͑Δ // style.css .example { color: #fff; } .example p { background: #fff; color: #000; }
34. ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ $mainColorʹ#fffΛೖΕ͍ͯΔͷͰɺίϯύΠϧ͢Δ ͱ$mainColorͱೖΕͨͱ͜Ζ͸͢΂ͯ#fffʹม׵͞Ε ·ͨ͠ɻ ͭ·Γɺޙ͔Βʮ΍ͬͺΓ#efefefʹ͠Αʔͬͱʯͱ ͳͬͨͱ͖ʹɺ$mainColorͷ஋͚ͩΛมߋ͢Ε͹ɺ $mainColorͰࢦఆͨ͢͠΂ͯͷՕॴʹҰॠͰ൓ө͞Ε ·͢ɻ
35. ͜͜·ͰͰɺ͋Δ“͋Θٕͤ”͕ ࢖͑·͢
36. ͋Θٕͤʂ(͜Ε͚ͩ࢖͑ͨΒ΋͏উͪͰ͢) // style.scss $tablet: 768px; $desktop: 1100px; $mainColor: #fff; .example { color: $mainColor; @media (min-width: $tablet) { width: 900px; margin: 0 auto; } @media (min-width: $desktop) { width: 1200px; } }
37. ೖΕࢠͰϝσΟΞΫΤϦʔΛॻ͘ʂ ͜ΕʹҰ൪ײಈ͠·ͨ͠ɻ
 ͩͬͯɺࠓ·ͰͳΜͱͳ͘@mediaʙͷதʹͦΕͧΕͷ هड़Λ·ͱΊͯॻ͍ͯ·ͤΜͰͨ͠ʁ ͋ͱ͔Βॻ͖௚͢ͱ͔PCαΠζͷͱ͖ʹ௥ه…ͱ͔ɺͲ ͜ʹॻ͍ͯΔͷ͔୳͢ͷ͘͢͝໘౗͡Όͳ͍Ͱ͔͢ʁʁ ϝσΟΞΫΤϦʔͷ஋͸ม਺Ͱ؅ཧͰ͖ΔͷͰɺ΋ͪΖ Μ͋ͱ͔Βมߋ΋௒؆୯Ͱ͢ɻ
38. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ
 ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ
39. Πϯϙʔτͷॻ͖ํ // style.scss @import './_test';
40. CSSͷΠϯϙʔτͱͲ͏ҧ͏ʁ CSSͷΠϯϙʔτͷ৔߹ɺ࣮࣭Πϯϙʔτͨ͠෼ͷ CSSϑΝΠϧΛಡΈࠐΈ·͢ɻʢࠓճͷ৔߹Λྫʹ ͋͛Δͱɺstyle.cssͱ_test.cssʣ SassͷΠϯϙʔτͷ৔߹ɺΠϯϙʔτͤͨ͞scss ʢstyle.scssʣ಺ʹΠϯϙʔτͨ͠scssʢ_test.scssʣ Λهड़͢ΔͷͰɺCSS͸1ϑΝΠϧͰ׬݁͠·͢ɻ
41. ࡉ͔͘Θ͚ͯΈΔ // style.scss @import ‘./_header'; @import ‘./_footer’; @import ‘./_item’;
42. _͖ͭͱ_ͳ͠ Πϯϙʔτͤͨ͞ϑΝΠϧʹ_ʢΞϯμʔϥΠϯʣ Λ͚͍ͭͯΔͷʹ͓ؾ͖ͮͰ͠ΐ͏͔ʁ ΞϯμʔϥΠϯΛ͚͍ͭͯΔͱɺ௨ৗίϯύΠϧ ͯࣗ͠ಈੜ੒͞ΕΔcssϑΝΠϧ͕ੜ੒͞Εͳ͘ͳ Γ·͢ʂʢPreprosͰΞϯμʔϥΠϯͷ͍ͭͨϑΝ Πϧ͸ಡΈࠐΈ༻ͳͷͶɺͱೝࣝ͞ΕΔͷͰ͢ʣ
43. Sassʹ͸·ͩ·ͩศརͳػೳ͕ͨ͘͞Μ ม਺͸਺஋ͳͲ୯Ұͷ஋Ͱ͕ͨ͠ɺؔ਺ͱͯ͠ελ ΠϧࣗମΛఆٛͨ͠Γɺ.example-1͔Β.example- 10·Ͱ܁Γฦ͠هड़ͨ͠Γ͢Δهड़ํ๏΋͋Γ· ͢ɻ Ͱ΋ɺҰؾʹ٧ΊࠐΉඞཁ͸શ͋͘Γ·ͤΜʂ
 ͳͥͳΒɺઌఔڍ͛ͨ4ͭΛ࢖͑Ε͹ܶతʹָʹͳ Δ͔ΒͰ͢ɻ
44. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ
 ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ
45. ΋͏ͪΐͬͱ஌Γ͍ͨʁ
47. Web੍࡞ऀͷͨΊͷSassͷڭՊॻ • ʮϐϯΫͷSassຊʯͰ͔ͳΓ༗໊ͳຊͰ͢ɻ ࢲ΋ಡΜͩຊͰ͕͢ɺ࠷ۙվగ൛͕ग़·ͨ͠ • ࠓճඞཁ࠷௿ݶ͔͠৮Ε͍ͯ·ͤΜ͕ɺͬ͠ ͔ΓSassʹ͍ͭͯղઆͯ͋͠Δͷ͸΋ͪΖ Μɺൃలతͳ಺༰΋ॻ͍ͯ͋ͬͯॳ৺ऀʙத ڃऀ͘Β͍·Ͱ࢖͑Δຊͩͱࢥ͍·͢ɻ
48. ࣭໰λΠϜ