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

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

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

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

Chiaki Okamoto

October 14, 2017
Tweet

More Decks by Chiaki Okamoto

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. ࢲ͸໘౗Ͱ͢ʂʂ
    ͲͷCSSʹϕϯμʔϓϨϑΟοΫε͕ʔͱ͔ɺ

    ϝσΟΞΫΤϦʔ͕ʔͱ͔ɺ͋ͬɺ͜͜શ෦ม
    ΘΔ͚Ͳॻ͖׵͑େมɾɾɾͱ͔ɺ΋͏ߟ͑Δ
    ͷ΋ΠϠʹͳ͖ͬͯ·͢Ͷʂ

    View Slide

  4. View Slide

  5. Sassʢαεʣ
    CSSϓϦϓϩηοαͱ͍͏΋ͷͰ͢ɻ
    Syntactically Awesome StyleSheetͷུΒ͍͠Ͱ
    ͢ɻ
    ͳΜͩ͜Ε͸ʁͰ͢ͶɻCSSΛॻ͘ͱ͖ʹ
    ͪΐͬͱศརʹͯ͘͠ΕΔπʔϧΈ͍ͨͳ΋ͷ
    Ͱ͢ʂ

    View Slide

  6. Ͱ΋೉͍͠ΜͰ͠ΐ͏ʁ

    View Slide

  7. ೉͘͠ͳ͍ͱ͸ݴΘͳ͍
    ৽͍͠΋ͷʹ͸ษڧίετ͕͍Γ·͢ɻ

    ͨͩɺࢲ͕SassΛ͓͢͢Ί͢Δͷ͸ͦ͜·Ͱߴ
    ͍ษڧίετ͸ඞཁͳ͍͔ΒͰ͢ɻ
    ࠷ॳʹݴ͍·͢ɻʮͱ͋ΔπʔϧΛىಈͯ͠
    filename.cssΛfilename.scssʹϦωʔϜ͢Δʯ
    ͚ͩͰಋೖ͚ͩ͸׬ྃ͠·͢ɻ

    View Slide

  8. ͱ͋Δπʔϧʁ

    View Slide

  9. Prepros

    View Slide

  10. PreprosʢϓϦϓϩεʣ
    Sass͸ͦͷ··HTMLͰಡΈࠐ·ͤͯ΋CSSͱ͠
    ͯ࢖͏͜ͱ͕Ͱ͖·ͤΜɻ

    ͦ͜Ͱɺfilename.scssͰॻ͍ͨCSSΛɺ
    filename.cssʹίϯύΠϧʢม׵ʣͯ͋͛͠Δඞ
    ཁ͕͋Γ·͢ɻ
    ͦͷίϯύΠϧΛͯ͘͠ΕΔͷ͕PreprosͰ͢ɻ

    View Slide

  11. ॳΊͯʹ͸࠷దʂ
    ࢲ΋࠷ॳSassΛ৮ͬͨͱ͖ɺPreprosΛ࢖͍·͠
    ͨʂ৽͍͜͠ͱϠμ…ۤख…ͱ͍͏ํ΋ɺ͋·
    Γߏ͑ͣʹͱΓ͋͑ͣݟΔ͚ͩݟͯΈ·͠ΐ͏ɻ

    View Slide

  12. PreprosͷςʔϚΧϥʔ
    LightͰ΋DarkͰ΋޷͖ͳํΛબͼ·͢

    View Slide

  13. ࠨԼͷAdd ProjectͰ௥Ճ
    ΋͘͠͸͜ͷը໘ʹϑΥϧμυϩοϓ

    View Slide

  14. ͋ͱ͸ී௨ʹCSSΛॻ͘
    .sample {
    display: flex;
    }
    .example {
    text-align: center;
    }

    View Slide

  15. CSSϑΥϧμͷதʹࣗಈੜ੒
    OUTPUT PATHͰੜ੒ઌΛมߋՄೳʂ

    View Slide

  16. ͱΓ͋͑ͣॻ͍ͯΈΔίπ
    • ී௨ʹࠓ·Ͱ௨ΓCSSΛॻ͚͹OK
    • ͨͩɾɾɾϕϯμʔϓϨϑΟοΫε͸ॻ͔ͳ͘
    ͯOKʂCSSʹίϯύΠϧͨ͠ͱ͖ʹউखʹ଍
    ͞Ε͍ͯ·͢ʂ˞
    ※ͨͩ͠ɺͲ͔͜ΒͲ͜·Ͱͷϒϥ΢βΛݟΔ͔͸ࢦఆͯ͋͛͠Δͱ٢

    View Slide

  17. Settings͔Βมߋ
    Other SettingsͷAutoprefixer

    View Slide

  18. !!CAUTION!!

    View Slide

  19. .scssͰॻ͘ͳΒ.css͸๨ΕΑ͏
    filename.scss͔Βfilename.css΁ͷίϯύΠϧ͸
    Ͱ͖·͕͢ɺ࢒೦ͳ͕Βfilename.css͔Β
    filename.scss΁ͷίϯύΠϧ͸Ͱ͖·ͤΜʂ

    cssϑΝΠϧಠࣗʹ௥هͯ͠΋ɺscssϑΝΠϧΛί
    ϯύΠϧ͢Δͱcssʹॻ͍ͨ಺༰͸ফ͑ͯ͠·͏ͷ
    Ͱɺcss͸ݟΔ͚ͩͷ΋ͷͱೝࣝΛվΊ·͠ΐ͏ɻ

    View Slide

  20. ͑ɺશવָʹͳͬͯͳ͍

    View Slide

  21. ͖ͬ͞ݴͬͨ͜ͱ
    ʮͱ͋ΔπʔϧΛىಈͯ͠filename.cssΛ
    filename.scssʹϦωʔϜ͢Δʯ͚ͩͰಋೖ͚ͩ
    ͸׬ྃ͠·͢ɻ

    View Slide

  22. ͖ͬ͞ݴͬͨ͜ͱ
    ʮͱ͋ΔπʔϧΛىಈͯ͠filename.cssΛ
    filename.scssʹϦωʔϜ͢Δʯ͚ͩͰಋೖ͚ͩ
    ͸׬ྃ͠·͢ɻ
    ͭ·Γɺָ͢ΔͨΊʹ͸΋͏ͪΐͬͱ֮͑Δ͜
    ͱ͕͋Γ·͢ɻ

    View Slide

  23. ָ͢ΔͨΊͷ͋Ε͜Ε

    View Slide

  24. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ
    • ϕϯμʔϓϨϑΟοΫεͷলུ

    ˠಋೖ͚ͩͰOK
    • ೖΕࢠͰॻ͚Δ
    • ม਺Λ࢖͑Δ
    • ϑΝΠϧͷΠϯϙʔτ
    ଞʹ΋৭ʑ͋Γ·͕͢ͱΓ͋͑ͣ͜Ε͚ͩͰ΋࢖͑Δͱ௒˒ָͰ͢ɻ

    View Slide

  25. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ
    • ϕϯμʔϓϨϑΟοΫεͷলུ

    ˠಋೖ͚ͩͰOK
    • ೖΕࢠͰॻ͚Δ
    • ม਺Λ࢖͑Δ
    • ϑΝΠϧͷΠϯϙʔτ

    View Slide

  26. ೖΕࢠͰॻ͚Δͱ͸ʁ
    // style.scss
    .example {
    text-align: center;
    p {
    font-size: 1.3rem;
    }
    &__child {
    font-size: 3rem;
    }
    }

    View Slide

  27. CSSʹίϯύΠϧ͢Δͱ…
    // style.css
    .example {
    text-align: center;
    }
    .example p {
    font-size: 1.3rem;
    }
    .example__child {
    font-size: 3rem;
    }

    View Slide

  28. ೖΕࢠʢωετʣͷϝϦοτ
    • ϝϯςφϯεੑ͕޲্͢Δ
    • هड़ྔ͕ݮΔʹλΠϙ΋ݮΔ
    • ͨͩ͠ɺೖΕࢠΛਂ͗͘͢͠Δͱৄࡉ౓্͕
    ͕ΔͷͰ΄Ͳ΄Ͳʹɻ

    View Slide

  29. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ
    • ϕϯμʔϓϨϑΟοΫεͷলུ

    ˠಋೖ͚ͩͰOK
    • ೖΕࢠͰॻ͚Δ
    • ม਺Λ࢖͑Δ
    • ϑΝΠϧͷΠϯϙʔτ

    View Slide

  30. ม਺ͱ͸ʁ
    // style.scss
    $mainColor: #fff;

    View Slide

  31. $ϚʔΫ͕ม਺ͷূ
    $hoge: ਺஋ͱ͔৭ʑ;

    ͱ͍͏ॻ͖ํΛ͢Δͱม਺ѻ͍ʹͳΓ·͢ɻ
    ม਺ʹͨ͠ΒԿ͕ศརͳͷͰ͠ΐ͏ʁ

    View Slide

  32. ಉ͡ࢦఆΛ܁Γฦ͠࢖͑Δ
    // style.scss
    $mainColor: #fff;
    .example {
    color: $mainColor;
    p {
    background: $mainColor;
    color: #000;
    }
    }

    View Slide

  33. ಉ͡ࢦఆΛ܁Γฦ͠࢖͑Δ
    // style.css
    .example {
    color: #fff;
    }
    .example p {
    background: #fff;
    color: #000;
    }

    View Slide

  34. ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔
    $mainColorʹ#fffΛೖΕ͍ͯΔͷͰɺίϯύΠϧ͢Δ
    ͱ$mainColorͱೖΕͨͱ͜Ζ͸͢΂ͯ#fffʹม׵͞Ε
    ·ͨ͠ɻ
    ͭ·Γɺޙ͔Βʮ΍ͬͺΓ#efefefʹ͠Αʔͬͱʯͱ
    ͳͬͨͱ͖ʹɺ$mainColorͷ஋͚ͩΛมߋ͢Ε͹ɺ
    $mainColorͰࢦఆͨ͢͠΂ͯͷՕॴʹҰॠͰ൓ө͞Ε
    ·͢ɻ

    View Slide

  35. ͜͜·ͰͰɺ͋Δ“͋Θٕͤ”͕
    ࢖͑·͢

    View Slide

  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;
    }
    }

    View Slide

  37. ೖΕࢠͰϝσΟΞΫΤϦʔΛॻ͘ʂ
    ͜ΕʹҰ൪ײಈ͠·ͨ͠ɻ

    ͩͬͯɺࠓ·ͰͳΜͱͳ͘@mediaʙͷதʹͦΕͧΕͷ
    هड़Λ·ͱΊͯॻ͍ͯ·ͤΜͰͨ͠ʁ
    ͋ͱ͔Βॻ͖௚͢ͱ͔PCαΠζͷͱ͖ʹ௥ه…ͱ͔ɺͲ
    ͜ʹॻ͍ͯΔͷ͔୳͢ͷ͘͢͝໘౗͡Όͳ͍Ͱ͔͢ʁʁ
    ϝσΟΞΫΤϦʔͷ஋͸ม਺Ͱ؅ཧͰ͖ΔͷͰɺ΋ͪΖ
    Μ͋ͱ͔Βมߋ΋௒؆୯Ͱ͢ɻ

    View Slide

  38. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ
    • ϕϯμʔϓϨϑΟοΫεͷলུ

    ˠಋೖ͚ͩͰOK
    • ೖΕࢠͰॻ͚Δ
    • ม਺Λ࢖͑Δ
    • ϑΝΠϧͷΠϯϙʔτ

    View Slide

  39. Πϯϙʔτͷॻ͖ํ
    // style.scss
    @import './_test';

    View Slide

  40. CSSͷΠϯϙʔτͱͲ͏ҧ͏ʁ
    CSSͷΠϯϙʔτͷ৔߹ɺ࣮࣭Πϯϙʔτͨ͠෼ͷ
    CSSϑΝΠϧΛಡΈࠐΈ·͢ɻʢࠓճͷ৔߹Λྫʹ
    ͋͛Δͱɺstyle.cssͱ_test.cssʣ
    SassͷΠϯϙʔτͷ৔߹ɺΠϯϙʔτͤͨ͞scss
    ʢstyle.scssʣ಺ʹΠϯϙʔτͨ͠scssʢ_test.scssʣ
    Λهड़͢ΔͷͰɺCSS͸1ϑΝΠϧͰ׬݁͠·͢ɻ

    View Slide

  41. ࡉ͔͘Θ͚ͯΈΔ
    // style.scss
    @import ‘./_header';
    @import ‘./_footer’;
    @import ‘./_item’;

    View Slide

  42. _͖ͭͱ_ͳ͠
    Πϯϙʔτͤͨ͞ϑΝΠϧʹ_ʢΞϯμʔϥΠϯʣ
    Λ͚͍ͭͯΔͷʹ͓ؾ͖ͮͰ͠ΐ͏͔ʁ
    ΞϯμʔϥΠϯΛ͚͍ͭͯΔͱɺ௨ৗίϯύΠϧ
    ͯࣗ͠ಈੜ੒͞ΕΔcssϑΝΠϧ͕ੜ੒͞Εͳ͘ͳ
    Γ·͢ʂʢPreprosͰΞϯμʔϥΠϯͷ͍ͭͨϑΝ
    Πϧ͸ಡΈࠐΈ༻ͳͷͶɺͱೝࣝ͞ΕΔͷͰ͢ʣ

    View Slide

  43. Sassʹ͸·ͩ·ͩศརͳػೳ͕ͨ͘͞Μ
    ม਺͸਺஋ͳͲ୯Ұͷ஋Ͱ͕ͨ͠ɺؔ਺ͱͯ͠ελ
    ΠϧࣗମΛఆٛͨ͠Γɺ.example-1͔Β.example-
    10·Ͱ܁Γฦ͠هड़ͨ͠Γ͢Δهड़ํ๏΋͋Γ·
    ͢ɻ
    Ͱ΋ɺҰؾʹ٧ΊࠐΉඞཁ͸શ͋͘Γ·ͤΜʂ

    ͳͥͳΒɺઌఔڍ͛ͨ4ͭΛ࢖͑Ε͹ܶతʹָʹͳ
    Δ͔ΒͰ͢ɻ

    View Slide

  44. SassΛऔΓೖΕָͯͰ͖Δ͜ͱ
    • ϕϯμʔϓϨϑΟοΫεͷলུ

    ˠಋೖ͚ͩͰOK
    • ೖΕࢠͰॻ͚Δ
    • ม਺Λ࢖͑Δ
    • ϑΝΠϧͷΠϯϙʔτ

    View Slide

  45. ΋͏ͪΐͬͱ஌Γ͍ͨʁ

    View Slide

  46. View Slide

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

    View Slide

  48. ࣭໰λΠϜ

    View Slide