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
330
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
340
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
2k
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
14k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.4k
こんなCSSからはそろそろ卒業しよう
chiilog
18
17k
さいきょうのWordPressサイト構築フローとは
chiilog
2
1k
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
2.1k
Other Decks in Technology
See All in Technology
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
270
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
260
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
110
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Facilitating Awesome Meetings
lara
55
6.5k
Docker and Python
trallard
45
3.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What's in a price? How to price your products and services
michaelherold
246
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Automating Front-end Workflow
addyosmani
1370
200k
Navigating Team Friction
lara
189
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Music & Morning Musume
bryan
46
6.8k
Visualization
eitanlees
148
16k
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ʹ͍ͭͯղઆͯ͋͠ΔͷͪΖ Μɺൃలతͳ༰ॻ͍ͯ͋ͬͯॳ৺ऀʙத ڃऀ͘Β͍·Ͱ͑Δຊͩͱࢥ͍·͢ɻ
࣭λΠϜ