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
500
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
160
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
Apache Spark もくもく会
taka_aki
0
140
roppongirb_20250911
igaiga
1
250
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
210
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
570
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
400
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
Git: the NoSQL Database
bkeepers
PRO
431
66k
A Tale of Four Properties
chriscoyier
160
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
4 Signs Your Business is Dying
shpigford
184
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building Adaptive Systems
keathley
43
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cult of Friendly URLs
andyhume
79
6.6k
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ϓϦϓϩηοαͷܦݧऀ͕पΓʹ͍ͳ͍ͷͰɺܦݧ ऀͷํͷ͓͕ฉ͚ͨΒخ͍͠Ͱ͢ɻ