社内向け勉強会で作ったスライド
·ͩCSSͰফ͍ͨ͠ʁSassΛָ֮͑ͯͪ͠Ό͓͏ʂ2017.10.14 Obara Chiaki
View Slide
ਖ਼ɺCSS໘͡Όͳ͍Ͱ͔͢ʁ
ࢲ໘Ͱ͢ʂʂͲͷCSSʹϕϯμʔϓϨϑΟοΫε͕ʔͱ͔ɺ ϝσΟΞΫΤϦʔ͕ʔͱ͔ɺ͋ͬɺ͜͜શ෦มΘΔ͚Ͳॻ͖͑େมɾɾɾͱ͔ɺ͏ߟ͑ΔͷΠϠʹͳ͖ͬͯ·͢Ͷʂ
SassʢαεʣCSSϓϦϓϩηοαͱ͍͏ͷͰ͢ɻSyntactically Awesome StyleSheetͷུΒ͍͠Ͱ͢ɻͳΜͩ͜ΕʁͰ͢ͶɻCSSΛॻ͘ͱ͖ʹͪΐͬͱศརʹͯ͘͠ΕΔπʔϧΈ͍ͨͳͷͰ͢ʂ
Ͱ͍͠ΜͰ͠ΐ͏ʁ
͘͠ͳ͍ͱݴΘͳ͍৽͍͠ͷʹษڧίετ͕͍Γ·͢ɻ ͨͩɺࢲ͕SassΛ͓͢͢Ί͢Δͷͦ͜·Ͱߴ͍ษڧίετඞཁͳ͍͔ΒͰ͢ɻ࠷ॳʹݴ͍·͢ɻʮͱ͋ΔπʔϧΛىಈͯ͠filename.cssΛfilename.scssʹϦωʔϜ͢Δʯ͚ͩͰಋೖ͚ͩྃ͠·͢ɻ
ͱ͋Δπʔϧʁ
Prepros
PreprosʢϓϦϓϩεʣSassͦͷ··HTMLͰಡΈࠐ·ͤͯCSSͱͯ͠͏͜ͱ͕Ͱ͖·ͤΜɻ ͦ͜Ͱɺfilename.scssͰॻ͍ͨCSSΛɺfilename.cssʹίϯύΠϧʢมʣͯ͋͛͠Δඞཁ͕͋Γ·͢ɻͦͷίϯύΠϧΛͯ͘͠ΕΔͷ͕PreprosͰ͢ɻ
ॳΊͯʹ࠷దʂࢲ࠷ॳSassΛ৮ͬͨͱ͖ɺPreprosΛ͍·ͨ͠ʂ৽͍͜͠ͱϠμ…ۤख…ͱ͍͏ํɺ͋·Γߏ͑ͣʹͱΓ͋͑ͣݟΔ͚ͩݟͯΈ·͠ΐ͏ɻ
PreprosͷςʔϚΧϥʔLightͰDarkͰ͖ͳํΛબͼ·͢
ࠨԼͷAdd ProjectͰՃ͘͜͠ͷը໘ʹϑΥϧμυϩοϓ
͋ͱී௨ʹCSSΛॻ͘.sample {display: flex;}.example {text-align: center;}
CSSϑΥϧμͷதʹࣗಈੜOUTPUT PATHͰੜઌΛมߋՄೳʂ
ͱΓ͋͑ͣॻ͍ͯΈΔίπ• ී௨ʹࠓ·Ͱ௨ΓCSSΛॻ͚OK• ͨͩɾɾɾϕϯμʔϓϨϑΟοΫεॻ͔ͳͯ͘OKʂCSSʹίϯύΠϧͨ͠ͱ͖ʹউखʹ͞Ε͍ͯ·͢ʂ˞※ͨͩ͠ɺͲ͔͜ΒͲ͜·ͰͷϒϥβΛݟΔ͔ࢦఆͯ͋͛͠Δͱ٢
Settings͔ΒมߋOther SettingsͷAutoprefixer
!!CAUTION!!
.scssͰॻ͘ͳΒ.cssΕΑ͏filename.scss͔Βfilename.cssͷίϯύΠϧͰ͖·͕͢ɺ೦ͳ͕Βfilename.css͔Βfilename.scssͷίϯύΠϧͰ͖·ͤΜʂ cssϑΝΠϧಠࣗʹهͯ͠ɺscssϑΝΠϧΛίϯύΠϧ͢Δͱcssʹॻ͍ͨ༰ফ͑ͯ͠·͏ͷͰɺcssݟΔ͚ͩͷͷͱೝࣝΛվΊ·͠ΐ͏ɻ
͑ɺશવָʹͳͬͯͳ͍
͖ͬ͞ݴͬͨ͜ͱʮͱ͋ΔπʔϧΛىಈͯ͠filename.cssΛfilename.scssʹϦωʔϜ͢Δʯ͚ͩͰಋೖ͚ͩྃ͠·͢ɻ
͖ͬ͞ݴͬͨ͜ͱʮͱ͋ΔπʔϧΛىಈͯ͠filename.cssΛfilename.scssʹϦωʔϜ͢Δʯ͚ͩͰಋೖ͚ͩྃ͠·͢ɻͭ·Γɺָ͢ΔͨΊʹ͏ͪΐͬͱ֮͑Δ͜ͱ͕͋Γ·͢ɻ
ָ͢ΔͨΊͷ͋Ε͜Ε
SassΛऔΓೖΕָͯͰ͖Δ͜ͱ• ϕϯμʔϓϨϑΟοΫεͷলུ ˠಋೖ͚ͩͰOK• ೖΕࢠͰॻ͚Δ• มΛ͑Δ• ϑΝΠϧͷΠϯϙʔτଞʹ৭ʑ͋Γ·͕͢ͱΓ͋͑ͣ͜Ε͚ͩͰ͑Δͱ˒ָͰ͢ɻ
SassΛऔΓೖΕָͯͰ͖Δ͜ͱ• ϕϯμʔϓϨϑΟοΫεͷলུ ˠಋೖ͚ͩͰOK• ೖΕࢠͰॻ͚Δ• มΛ͑Δ• ϑΝΠϧͷΠϯϙʔτ
ೖΕࢠͰॻ͚Δͱʁ// style.scss.example {text-align: center;p {font-size: 1.3rem;}&__child {font-size: 3rem;}}
CSSʹίϯύΠϧ͢Δͱ…// style.css.example {text-align: center;}.example p {font-size: 1.3rem;}.example__child {font-size: 3rem;}
ೖΕࢠʢωετʣͷϝϦοτ• ϝϯςφϯεੑ্͕͢Δ• هड़ྔ͕ݮΔʹλΠϙݮΔ• ͨͩ͠ɺೖΕࢠΛਂ͗͘͢͠Δͱৄࡉ্͕͕ΔͷͰ΄Ͳ΄Ͳʹɻ
มͱʁ// style.scss$mainColor: #fff;
$ϚʔΫ͕มͷূ$hoge: ͱ͔৭ʑ; ͱ͍͏ॻ͖ํΛ͢Δͱมѻ͍ʹͳΓ·͢ɻมʹͨ͠ΒԿ͕ศརͳͷͰ͠ΐ͏ʁ
ಉ͡ࢦఆΛ܁Γฦ͑͠Δ// style.scss$mainColor: #fff;.example {color: $mainColor;p {background: $mainColor;color: #000;}}
ಉ͡ࢦఆΛ܁Γฦ͑͠Δ// style.css.example {color: #fff;}.example p {background: #fff;color: #000;}
͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔$mainColorʹ#fffΛೖΕ͍ͯΔͷͰɺίϯύΠϧ͢Δͱ$mainColorͱೖΕͨͱ͜Ζͯ͢#fffʹม͞Ε·ͨ͠ɻͭ·Γɺޙ͔ΒʮͬͺΓ#efefefʹ͠Αʔͬͱʯͱͳͬͨͱ͖ʹɺ$mainColorͷ͚ͩΛมߋ͢Εɺ$mainColorͰࢦఆͨͯ͢͠ͷՕॴʹҰॠͰө͞Ε·͢ɻ
͜͜·ͰͰɺ͋Δ“͋Θٕͤ”͕͑·͢
͋Θٕͤʂ(͜Ε͚ͩ͑ͨΒ͏উͪͰ͢)// 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;}}
ೖΕࢠͰϝσΟΞΫΤϦʔΛॻ͘ʂ͜ΕʹҰ൪ײಈ͠·ͨ͠ɻ ͩͬͯɺࠓ·ͰͳΜͱͳ͘@mediaʙͷதʹͦΕͧΕͷهड़Λ·ͱΊͯॻ͍ͯ·ͤΜͰͨ͠ʁ͋ͱ͔Βॻ͖͢ͱ͔PCαΠζͷͱ͖ʹه…ͱ͔ɺͲ͜ʹॻ͍ͯΔͷ͔୳͢ͷ͘͢͝໘͡Όͳ͍Ͱ͔͢ʁʁϝσΟΞΫΤϦʔͷมͰཧͰ͖ΔͷͰɺͪΖΜ͋ͱ͔Βมߋ؆୯Ͱ͢ɻ
Πϯϙʔτͷॻ͖ํ// style.scss@import './_test';
CSSͷΠϯϙʔτͱͲ͏ҧ͏ʁCSSͷΠϯϙʔτͷ߹ɺ࣮࣭Πϯϙʔτͨ͠ͷCSSϑΝΠϧΛಡΈࠐΈ·͢ɻʢࠓճͷ߹Λྫʹ͋͛Δͱɺstyle.cssͱ_test.cssʣSassͷΠϯϙʔτͷ߹ɺΠϯϙʔτͤͨ͞scssʢstyle.scssʣʹΠϯϙʔτͨ͠scssʢ_test.scssʣΛهड़͢ΔͷͰɺCSS1ϑΝΠϧͰ݁͠·͢ɻ
ࡉ͔͘Θ͚ͯΈΔ// style.scss@import ‘./_header';@import ‘./_footer’;@import ‘./_item’;
_͖ͭͱ_ͳ͠Πϯϙʔτͤͨ͞ϑΝΠϧʹ_ʢΞϯμʔϥΠϯʣΛ͚͍ͭͯΔͷʹ͓ؾ͖ͮͰ͠ΐ͏͔ʁΞϯμʔϥΠϯΛ͚͍ͭͯΔͱɺ௨ৗίϯύΠϧͯࣗ͠ಈੜ͞ΕΔcssϑΝΠϧ͕ੜ͞Εͳ͘ͳΓ·͢ʂʢPreprosͰΞϯμʔϥΠϯͷ͍ͭͨϑΝΠϧಡΈࠐΈ༻ͳͷͶɺͱೝࣝ͞ΕΔͷͰ͢ʣ
Sassʹ·ͩ·ͩศརͳػೳ͕ͨ͘͞ΜมͳͲ୯ҰͷͰ͕ͨ͠ɺؔͱͯ͠ελΠϧࣗମΛఆٛͨ͠Γɺ.example-1͔Β.example-10·Ͱ܁Γฦ͠هड़ͨ͠Γ͢Δهड़ํ๏͋Γ·͢ɻͰɺҰؾʹ٧ΊࠐΉඞཁશ͋͘Γ·ͤΜʂ ͳͥͳΒɺઌఔڍ͛ͨ4ͭΛ͑ΕܶతʹָʹͳΔ͔ΒͰ͢ɻ
͏ͪΐͬͱΓ͍ͨʁ
Web੍࡞ऀͷͨΊͷSassͷڭՊॻ• ʮϐϯΫͷSassຊʯͰ͔ͳΓ༗໊ͳຊͰ͢ɻࢲಡΜͩຊͰ͕͢ɺ࠷ۙվగ൛͕ग़·ͨ͠• ࠓճඞཁ࠷ݶ͔͠৮Ε͍ͯ·ͤΜ͕ɺ͔ͬ͠ΓSassʹ͍ͭͯղઆͯ͋͠ΔͷͪΖΜɺൃలతͳ༰ॻ͍ͯ͋ͬͯॳ৺ऀʙதڃऀ͘Β͍·Ͱ͑Δຊͩͱࢥ͍·͢ɻ
࣭λΠϜ
chiilog
toshiaizawa
sumiren
oracle4engineer
mii3king
kako351
foursue
tarao
fixstars
takufujii
tatematsu_san
kentosuzuki
roundedbygravity
samanthasiow
lauravandoore
ufuk
davidbonilla
gr2m
sugarenia
brettharned
shpigford
sachag
rasmusluckow
revolveconf