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
760
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.4k
WEBサイトが「できた」と安心する前に最終チェックすること
oscasierra
1
2k
Service Worker
oscasierra
1
1.5k
Growth of Podcast
oscasierra
0
1.4k
AIの知識無しでもAIを活用したQ&Aページを作る方法
oscasierra
1
1.2k
はじめてのサーバレス関数 (WEBエンジニア勉強会 #06)
oscasierra
0
970
みんなテストってどうやってるの?
oscasierra
0
500
Other Decks in Technology
See All in Technology
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
1
310
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
800
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
380
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
150
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
590
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
0
140
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
390
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
Geminiとv0による高速プロトタイピング
shinya337
0
200
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Faster Mobile Websites
deanohume
307
31k
Embracing the Ebb and Flow
colly
86
4.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
4 Signs Your Business is Dying
shpigford
184
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Writing Fast Ruby
sferik
628
62k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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ϓϦϓϩηοαͷܦݧऀ͕पΓʹ͍ͳ͍ͷͰɺܦݧ ऀͷํͷ͓͕ฉ͚ͨΒخ͍͠Ͱ͢ɻ