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
730
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.2k
WEBサイトを HTTP/2 に移行した話 / HTTP2
oscasierra
1
2k
次世代の認証(WebAuthn/FIDO2)について説明を試みる
oscasierra
2
1.3k
WEBサイトが「できた」と安心する前に最終チェックすること
oscasierra
1
1.9k
Service Worker
oscasierra
1
1.4k
Growth of Podcast
oscasierra
0
1.3k
AIの知識無しでもAIを活用したQ&Aページを作る方法
oscasierra
1
1.2k
はじめてのサーバレス関数 (WEBエンジニア勉強会 #06)
oscasierra
0
890
みんなテストってどうやってるの?
oscasierra
0
480
Other Decks in Technology
See All in Technology
Classmethod Odyssey 登壇資料
yamahiro
0
390
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8.4k
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
エンジニア向け会社紹介資料
caddi_eng
14
230k
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
219
8.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Faster Mobile Websites
deanohume
303
30k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Building an army of robots
kneath
301
42k
Making Projects Easy
brettharned
111
5.7k
Bash Introduction
62gerente
607
210k
Fireside Chat
paigeccino
25
2.8k
Typedesign – Prime Four
hannesfritz
37
2.2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
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ϓϦϓϩηοαͷܦݧऀ͕पΓʹ͍ͳ͍ͷͰɺܦݧ ऀͷํͷ͓͕ฉ͚ͨΒخ͍͠Ͱ͢ɻ