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
2025/09/18 AIコーディングで「保活手帳」を作ってみた
chiilog
0
50
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
340
私の推しはブロックエディター 〜デフォルトブロックに触れ合う〜
chiilog
0
360
この一年で身についた“マトモ”な 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
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
400
様々なファイルシステム
sat
PRO
0
230
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
170
OCIjp_Oracle AI World_Recap
shinpy
1
170
AI時代、“平均値”ではいられない
uhyo
8
2.4k
Digitization部 紹介資料
sansan33
PRO
1
5.7k
ソースを読むプロセスの例
sat
PRO
15
9.9k
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
310
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
頭部ふわふわ浄酔器
uyupun
0
110
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
180
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
For a Future-Friendly Web
brad_frost
180
10k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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ʹ͍ͭͯղઆͯ͋͠ΔͷͪΖ Μɺൃలతͳ༰ॻ͍ͯ͋ͬͯॳ৺ऀʙத ڃऀ͘Β͍·Ͱ͑Δຊͩͱࢥ͍·͢ɻ
࣭λΠϜ