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
0
58
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
310
この一年で身についた“マトモ”な 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
生成AIでwebアプリケーションを作ってみた
tajimon
2
120
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
480
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
150
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
280
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
140
In Praise of "Normal" Engineers (LDX3)
charity
2
1.2k
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
1.1k
20250623 Findy Lunch LT Brown
3150
0
760
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
53
32k
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
200
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
210
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
92
6.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Building Adaptive Systems
keathley
43
2.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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ʹ͍ͭͯղઆͯ͋͠ΔͷͪΖ Μɺൃలతͳ༰ॻ͍ͯ͋ͬͯॳ৺ऀʙத ڃऀ͘Β͍·Ͱ͑Δຊͩͱࢥ͍·͢ɻ
࣭λΠϜ