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

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

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

91c1739f71d94f9ce16efc553b84a18c?s=128

Chiaki Okamoto

October 14, 2017
Tweet

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. ࣭໰λΠϜ