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
2k
まだCSSで消耗したい?Sassを覚えて楽しちゃおう!
社内向け勉強会で作ったスライド
Chiaki Okamoto
October 14, 2017
Tweet
Share
More Decks by Chiaki Okamoto
See All by Chiaki Okamoto
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
220
この一年で身についた“マトモ”な WordPressテーマの作り方
chiilog
7
1.9k
WordPressテーマの作り方 2019 私のベストプラクティス
chiilog
24
13k
Google Optimizeで始めるA/Bテスト #wbkyoto
chiilog
1
3.1k
こんなCSSからはそろそろ卒業しよう
chiilog
18
16k
さいきょうのWordPressサイト構築フローとは
chiilog
2
980
エンジニアから見た、すごくやりやすかった構築フローの話
chiilog
0
1.8k
Other Decks in Technology
See All in Technology
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
Featured
See All Featured
Writing Fast Ruby
sferik
623
60k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
For a Future-Friendly Web
brad_frost
173
9.2k
Adopting Sorbet at Scale
ufuk
71
8.8k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Debugging Ruby Performance
tmm1
71
11k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
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ʹ͍ͭͯղઆͯ͋͠ΔͷͪΖ Μɺൃలతͳ༰ॻ͍ͯ͋ͬͯॳ৺ऀʙத ڃऀ͘Β͍·Ͱ͑Δຊͩͱࢥ͍·͢ɻ
࣭λΠϜ