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
2k
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
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
24
17k
多野優介
tanoyusuke
1
440
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
180
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
900
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
280
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
0
280
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
210
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
340
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Invisible Side of Design
smashingmag
301
51k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Balancing Empowerment & Direction
lara
4
680
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Scaling GitHub
holman
463
140k
Bash Introduction
62gerente
615
210k
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ϓϦϓϩηοαͷܦݧऀ͕पΓʹ͍ͳ͍ͷͰɺܦݧ ऀͷํͷ͓͕ฉ͚ͨΒخ͍͠Ͱ͢ɻ