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プリプロセッサ入門 (WEBエンジニア勉強会 #04)
Search
OSCA
November 25, 2017
Technology
0
770
CSSプリプロセッサ入門 (WEBエンジニア勉強会 #04)
2017年11月25日(土) に開催された「WEBエンジニア勉強会 #04」で CSSプリプロセッサについて発表しました。
OSCA
November 25, 2017
Tweet
Share
More Decks by OSCA
See All by OSCA
人工肉を食べよう / Let's eat fake meat
oscasierra
4
1.3k
WEBサイトを HTTP/2 に移行した話 / HTTP2
oscasierra
1
2.2k
次世代の認証(WebAuthn/FIDO2)について説明を試みる
oscasierra
2
1.5k
WEBサイトが「できた」と安心する前に最終チェックすること
oscasierra
1
2.1k
Service Worker
oscasierra
1
1.5k
Growth of Podcast
oscasierra
0
1.5k
AIの知識無しでもAIを活用したQ&Aページを作る方法
oscasierra
1
1.2k
はじめてのサーバレス関数 (WEBエンジニア勉強会 #06)
oscasierra
0
970
みんなテストってどうやってるの?
oscasierra
0
510
Other Decks in Technology
See All in Technology
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
180
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
2
560
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
210
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
0
180
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
340
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
260
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
260
事業開発におけるDify活用事例
kentarofujii
5
1.5k
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
910
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
380
Featured
See All Featured
Done Done
chrislema
185
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Building Applications with DynamoDB
mza
96
6.7k
Code Review Best Practice
trishagee
72
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
04$" ᖛ Ұೋࡾ !FOHJOFFS@PTDB $44ϓϦϓϩηοαೖ
ࣗݾհ © OSCA 04$"ᖛ Ұೋࡾ ·ͷ ͔ͣ;Έ ϓϩδΣΫτϚωʔδϟʔ ܠࣸਅՈ *
+BWB 1)1ϝΠϯͷΤϯδχΞ * ਓೳ "* ؔ࿈ͬͯΔ * ݸਓͰ714आΓͯ8&#αʔϏεΛӡӦத * ເͷࠃ ెาݍॅΈ * !FOHJOFFS@PTDB !PTDBQIPUP!EJTOFZ@PTDB
© OSCA 8&#ք۾ͰΑࣖ͘ʹ͢ΔΩʔϫʔυ • $44ϓϦϓϩηοα • $44ϝλݴޠ ͍͍ͬͨͳΜͩΖ͏ʁ $44ϓϦϓϩηοα $44ϝλݴޠ
© OSCA ࣍ͷΑ͏ͳෆຬɾఏى͔Βੜ͠·ͨ͠ɻ • ελΠϧͷίʔσΟϯάྔΛݮΒ͍ͨ͠ • ܁Γฦ͠ͷهड़ΛݮΒ͍ͨ͠ • $44ͰมΛ͍͍ͨ •
$44ͰࣜΛ͍͍ͨ $44ʹର͢Δෆຬɾఏى
© OSCA $44ͱಉ͘͡Β͍γϯϓϧͰɺม͑ΔΑ͏ͳʮϝλ ݴޠʯͰσβΠϯΛఆٛ͠ɺ$44ϓϦϓϩηοαͰίϯύ Πϧ͢Δͱɺ$44͕ੜ͞ΕΔɻ $44ϓϦϓϩηοα $44 ϓϦϓϩηοα ίϯύΠϧ $44
ϝλ ݴޠ
© OSCA $44ϓϦϓϩηοα @color: #cc0000; article { h1 { color:
@color; } .warning { color: @color; } } artice h1 { color: #cc0000 ; } article .waring { color: #cc0000 ; } CSSメタ言語 CSS 変数
© OSCA $44ͱಉ͘͡Β͍γϯϓϧͰɺม͑ΔΑ͏ͳʮϝλ ݴޠʯͰσβΠϯΛఆٛ͠ɺ$44ϓϦϓϩηοαͰίϯύ Πϧ͢Δͱɺ$44͕ੜ͞ΕΔɻ $44ϓϦϓϩηοα $44 ϓϦϓϩηοα ίϯύΠϧ $44
ϝλ ݴޠ
© OSCA ม 4BTT 4ZOUBDUJDBMMZ "XFTPNF 4UZMFTIFFUT $color: #dd0000; p
{ color: $color; } p { color: #dd0000; } sample.scss sample.css
© OSCA ܧঝΛ·ͱΊ͔͚ͯΔ 4BTT 4ZOUBDUJDBMMZ "XFTPNF 4UZMFTIFFUT ul { background-color:#eeeeee;
li { background-color :#ffffff; } } ul { background-color: #eeeeee; } ul li { background-color: #ffffff; } sample.scss sample.css
© OSCA ໊લۭؒ OBNFTQBDF 4BTT 4ZOUBDUJDBMMZ "XFTPNF 4UZMFTIFFUT .column{ border:{
color: #333333; style: solid; width: 1px; } } .column { border-color: #333333; border-style: solid; border-width: 1px; } sample.scss sample.css
© OSCA ϛοΫεΠϯ 4BTT 4ZOUBDUJDBMMZ "XFTPNF 4UZMFTIFFUT @mixin base {
color: #cc0000; font-weight: normal; } .column1 { @include base; background-color: #eeeeee; } .column2 { @include base; } .column1 { color: #cc0000; font-weight: normal; background-color: #eeeeee; } .column2 { color: #cc0000; font-weight: normal; } sample.scss sample.css
© OSCA ݅ذ 4BTT 4ZOUBDUJDBMMZ "XFTPNF 4UZMFTIFFUT $env: production; p
{ @if $env == production { color: #333333; } @else if $env == staging { color: #cc0000; } } p { color: #333333; } sample.scss sample.css
© OSCA ग़ྗܗࣜ ग़ྗ͢Δ$44ͷॻࣜΛબͰ͖Δ 4BTT 4ZOUBDUJDBMMZ "XFTPNF 4UZMFTIFFUT ul {
color: #ccffff; } ul li { color: #330000; } nested ul { color: #ccffff; } expanded ul { color: #ccffff; font-weight: bold; } ul li {color:#330000; } compact ul{color:#ccffff;font-weight:bold;}ul li{color:#330000;} compressed
© OSCA TBTTͱಉͷػೳΛͭ$44ϓϦϓϩηοαɻ • ม • ϛοΫεΠϯ • ೖΕࢠ •
໊લۭؒ • ࢛ଇԋࢉ -FTT -FBOFS$44
© OSCA ࣍ͷΑ͏ʹࢥͬͨਓ͕͍Δ͔͠Ε·ͤΜͶɻ • $44ͱผʹϝλݴޠ֮͑ΔͷΊΜͲͤ͘ʔʂ • ͍͍͚ͨͲɺϓϩδΣΫτద༻Ͱ͖Δؾ͕͠ͳ͍ʂ • νʔϜͰͷֶशίετͲ͏ͳΜͩΖ͏ʁ •
ϓϩάϥϚ͡Όͳͯ͘ѻ͑Δͷʁ ͬͺΓɺ͜ΕΒΛߟ্ྀͨ͠ͰͷϓϩδΣΫτಋೖ͕ඞཁɻ Ͳ͏ʁ ͍͍ͨͱࢥͬͨʁ
© OSCA ͓ΘΓʹ • $44ϓϦϓϩηοαͷܦݧऀ͕पΓʹ͍ͳ͍ͷͰɺܦݧ ऀͷํͷ͓͕ฉ͚ͨΒخ͍͠Ͱ͢ɻ