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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ਖ਼௚ɺCSS໘౗͡Όͳ͍Ͱ͔͢ʁ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Ͱ΋೉͍͠ΜͰ͠ΐ͏ʁ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ͱ͋Δπʔϧʁ

Slide 9

Slide 9 text

Prepros

Slide 10

Slide 10 text

PreprosʢϓϦϓϩεʣ Sass͸ͦͷ··HTMLͰಡΈࠐ·ͤͯ΋CSSͱ͠ ͯ࢖͏͜ͱ͕Ͱ͖·ͤΜɻ  ͦ͜Ͱɺﬁlename.scssͰॻ͍ͨCSSΛɺ ﬁlename.cssʹίϯύΠϧʢม׵ʣͯ͋͛͠Δඞ ཁ͕͋Γ·͢ɻ ͦͷίϯύΠϧΛͯ͘͠ΕΔͷ͕PreprosͰ͢ɻ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Settings͔Βมߋ Other SettingsͷAutopreﬁxer

Slide 18

Slide 18 text

!!CAUTION!!

Slide 19

Slide 19 text

.scssͰॻ͘ͳΒ.css͸๨ΕΑ͏ filename.scss͔Βfilename.css΁ͷίϯύΠϧ͸ Ͱ͖·͕͢ɺ࢒೦ͳ͕Βfilename.css͔Β filename.scss΁ͷίϯύΠϧ͸Ͱ͖·ͤΜʂ  cssϑΝΠϧಠࣗʹ௥هͯ͠΋ɺscssϑΝΠϧΛί ϯύΠϧ͢Δͱcssʹॻ͍ͨ಺༰͸ফ͑ͯ͠·͏ͷ Ͱɺcss͸ݟΔ͚ͩͷ΋ͷͱೝࣝΛվΊ·͠ΐ͏ɻ

Slide 20

Slide 20 text

͑ɺશવָʹͳͬͯͳ͍

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ָ͢ΔͨΊͷ͋Ε͜Ε

Slide 24

Slide 24 text

SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ  ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ ଞʹ΋৭ʑ͋Γ·͕͢ͱΓ͋͑ͣ͜Ε͚ͩͰ΋࢖͑Δͱ௒˒ָͰ͢ɻ

Slide 25

Slide 25 text

SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ  ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ  ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

$ϚʔΫ͕ม਺ͷূ $hoge: ਺஋ͱ͔৭ʑ;  ͱ͍͏ॻ͖ํΛ͢Δͱม਺ѻ͍ʹͳΓ·͢ɻ ม਺ʹͨ͠ΒԿ͕ศརͳͷͰ͠ΐ͏ʁ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

͜͜·ͰͰɺ͋Δ“͋Θٕͤ”͕ ࢖͑·͢

Slide 36

Slide 36 text

͋Θٕͤʂ(͜Ε͚ͩ࢖͑ͨΒ΋͏উͪͰ͢) // 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; } }

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ  ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Sassʹ͸·ͩ·ͩศརͳػೳ͕ͨ͘͞Μ ม਺͸਺஋ͳͲ୯Ұͷ஋Ͱ͕ͨ͠ɺؔ਺ͱͯ͠ελ ΠϧࣗମΛఆٛͨ͠Γɺ.example-1͔Β.example- 10·Ͱ܁Γฦ͠هड़ͨ͠Γ͢Δهड़ํ๏΋͋Γ· ͢ɻ Ͱ΋ɺҰؾʹ٧ΊࠐΉඞཁ͸શ͋͘Γ·ͤΜʂ  ͳͥͳΒɺઌఔڍ͛ͨ4ͭΛ࢖͑Ε͹ܶతʹָʹͳ Δ͔ΒͰ͢ɻ

Slide 44

Slide 44 text

SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ  ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • ม਺Λ࢖͑Δ • ϑΝΠϧͷΠϯϙʔτ

Slide 45

Slide 45 text

΋͏ͪΐͬͱ஌Γ͍ͨʁ

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

࣭໰λΠϜ