Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
Search
Chiaki Okamoto
October 14, 2017
Technology
4
2.1k
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
社内向け勉強会で作ったスライド
Chiaki Okamoto
October 14, 2017
Tweet
Share
More Decks by Chiaki Okamoto
See All by Chiaki Okamoto
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
210
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
320
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
2k
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
13k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.4k
こんなCSSからはそろそろ卒業しよう
chiilog
18
17k
さいきょうのWordPressサイト構築フローとは
chiilog
2
1k
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
2k
Other Decks in Technology
See All in Technology
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
480
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
Prox Industries株式会社 会社紹介資料
proxindustries
0
280
エンジニア向け技術スタック情報
kauche
1
250
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
2
950
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
3
120
本が全く読めなかった過去の自分へ
genshun9
0
260
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
540
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
14
5.1k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Being A Developer After 40
akosma
90
590k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Transcript
·ͩCSSͰফ͍ͨ͠ʁ SassΛָ֮͑ͯͪ͠Ό͓͏ʂ 2017.10.14 Obara Chiaki
ਖ਼ɺCSS໘͡Όͳ͍Ͱ͔͢ʁ
ࢲ໘Ͱ͢ʂʂ ͲͷCSSʹϕϯμʔϓϨϑΟοΫε͕ʔͱ͔ɺ ϝσΟΞΫΤϦʔ͕ʔͱ͔ɺ͋ͬɺ͜͜શ෦ม ΘΔ͚Ͳॻ͖͑େมɾɾɾͱ͔ɺ͏ߟ͑Δ ͷΠϠʹͳ͖ͬͯ·͢Ͷʂ
None
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; }
ೖΕࢠʢωετʣͷϝϦοτ • ϝϯςφϯεੑ্͕͢Δ • هड़ྔ͕ݮΔʹλΠϙݮΔ • ͨͩ͠ɺೖΕࢠΛਂ͗͘͢͠Δͱৄࡉ্͕ ͕ΔͷͰ΄Ͳ΄Ͳʹɻ
SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • มΛ͑Δ • ϑΝΠϧͷΠϯϙʔτ
มͱʁ // 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αΠζͷͱ͖ʹه…ͱ͔ɺͲ ͜ʹॻ͍ͯΔͷ͔୳͢ͷ͘͢͝໘͡Όͳ͍Ͱ͔͢ʁʁ ϝσΟΞΫΤϦʔͷมͰཧͰ͖ΔͷͰɺͪΖ Μ͋ͱ͔Βมߋ؆୯Ͱ͢ɻ
SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • มΛ͑Δ • ϑΝΠϧͷΠϯϙʔτ
Πϯϙʔτͷॻ͖ํ // 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ͭΛ͑Εܶతʹָʹͳ Δ͔ΒͰ͢ɻ
SassΛऔΓೖΕָͯͰ͖Δ͜ͱ • ϕϯμʔϓϨϑΟοΫεͷলུ ˠಋೖ͚ͩͰOK • ೖΕࢠͰॻ͚Δ • มΛ͑Δ • ϑΝΠϧͷΠϯϙʔτ
͏ͪΐͬͱΓ͍ͨʁ
None
Web੍࡞ऀͷͨΊͷSassͷڭՊॻ • ʮϐϯΫͷSassຊʯͰ͔ͳΓ༗໊ͳຊͰ͢ɻ ࢲಡΜͩຊͰ͕͢ɺ࠷ۙվగ൛͕ग़·ͨ͠ • ࠓճඞཁ࠷ݶ͔͠৮Ε͍ͯ·ͤΜ͕ɺͬ͠ ͔ΓSassʹ͍ͭͯղઆͯ͋͠ΔͷͪΖ Μɺൃలతͳ༰ॻ͍ͯ͋ͬͯॳ৺ऀʙத ڃऀ͘Β͍·Ͱ͑Δຊͩͱࢥ͍·͢ɻ
࣭λΠϜ