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

Transcript

1. ·ͩCSSͰফ໣͍ͨ͠ʁ SassΛָ֮͑ͯͪ͠Ό͓͏ʂ 2017.10.14 Obara Chiaki

2. ਖ਼௚ɺCSS໘౗͡Όͳ͍Ͱ͔͢ʁ

3. ࢲ͸໘౗Ͱ͢ʂʂ ͲͷCSSʹϕϯμʔϓϨϑΟοΫε͕ʔͱ͔ɺ
 ϝσΟΞΫΤϦʔ͕ʔͱ͔ɺ͋ͬɺ͜͜શ෦ม ΘΔ͚Ͳॻ͖׵͑େมɾɾɾͱ͔ɺ΋͏ߟ͑Δ ͷ΋ΠϠʹͳ͖ͬͯ·͢Ͷʂ

4. None

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. ΋͏ͪΐͬͱ஌Γ͍ͨʁ

46. None

47. Web੍࡞ऀͷͨΊͷSassͷڭՊॻ • ʮϐϯΫͷSassຊʯͰ͔ͳΓ༗໊ͳຊͰ͢ɻ ࢲ΋ಡΜͩຊͰ͕͢ɺ࠷ۙվగ൛͕ग़·ͨ͠ • ࠓճඞཁ࠷௿ݶ͔͠৮Ε͍ͯ·ͤΜ͕ɺͬ͠ ͔ΓSassʹ͍ͭͯղઆͯ͋͠Δͷ͸΋ͪΖ Μɺൃలతͳ಺༰΋ॻ͍ͯ͋ͬͯॳ৺ऀʙத ڃऀ͘Β͍·Ͱ࢖͑Δຊͩͱࢥ͍·͢ɻ

48. ࣭໰λΠϜ