CSSプリプロセッサ入門 (WEBエンジニア勉強会 #04)

2017年11月25日(土) に開催された「WEBエンジニア勉強会 #04」で CSSプリプロセッサについて発表しました。

Transcript

1. 04$"
   ᖛ໺ Ұೋࡾ !FOHJOFFS@PTDB $44ϓϦϓϩηοαೖ໳
2. ࣗݾ঺հ © OSCA 04$"
   
   ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ ϓϩδΣΫτϚωʔδϟʔ 
   ໷ܠࣸਅՈ * +BWB
   1)1
   ϝΠϯͷΤϯδχΞ * ਓ޻஌ೳ "* ؔ࿈΋΍ͬͯΔ * ݸਓͰ΋714आΓͯ8&#αʔϏεΛӡӦத * ເͷࠃ ెาݍ಺ॅΈ * !FOHJOFFS@PTDB 
   !PTDBQIPUP
   
   !EJTOFZ@PTDB
3. © OSCA 8&#ք۾ͰΑࣖ͘ʹ͢ΔΩʔϫʔυ • $44ϓϦϓϩηοα • $44ϝλݴޠ ͍͍ͬͨͳΜͩΖ͏ʁ $44ϓϦϓϩηοα 
   $44ϝλݴޠ
4. © OSCA ࣍ͷΑ͏ͳෆຬɾ໰୊ఏى͔Β஀ੜ͠·ͨ͠ɻ • ελΠϧͷίʔσΟϯάྔΛݮΒ͍ͨ͠ • ܁Γฦ͠ͷهड़ΛݮΒ͍ͨ͠ • $44Ͱ΋ม਺Λ࢖͍͍ͨ • $44Ͱ΋਺ࣜΛ࢖͍͍ͨ $44ʹର͢Δෆຬɾ໰୊ఏى
5. © OSCA $44ͱಉ͘͡Β͍γϯϓϧͰɺม਺΋࢖͑ΔΑ͏ͳʮϝλ ݴޠʯͰσβΠϯΛఆٛ͠ɺ$44ϓϦϓϩηοαͰίϯύ Πϧ͢Δͱɺ$44͕ੜ੒͞ΕΔɻ $44ϓϦϓϩηοα $44 ϓϦϓϩηοα ίϯύΠϧ $44 ϝλ ݴޠ
6. © OSCA $44ϓϦϓϩηοα @color: #cc0000; article { h1 { color: @color; } .warning { color: @color; } } artice h1 { color: #cc0000 ; } article .waring { color: #cc0000 ; } CSSメタ言語 CSS 変数
7. © OSCA $44ͱಉ͘͡Β͍γϯϓϧͰɺม਺΋࢖͑ΔΑ͏ͳʮϝλ ݴޠʯͰσβΠϯΛఆٛ͠ɺ$44ϓϦϓϩηοαͰίϯύ Πϧ͢Δͱɺ$44͕ੜ੒͞ΕΔɻ $44ϓϦϓϩηοα $44 ϓϦϓϩηοα ίϯύΠϧ $44 ϝλ ݴޠ
8. © OSCA ม਺ 4BTT 4ZOUBDUJDBMMZ "XFTPNF 4UZMFTIFFUT $color: #dd0000; p { color: $color; } p { color: #dd0000; } sample.scss sample.css
9. © 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
10. © 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
11. © 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
12. © 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
13. © 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
14. © OSCA TBTTͱಉ౳ͷػೳΛ΋ͭ$44ϓϦϓϩηοαɻ • ม਺ • ϛοΫεΠϯ • ೖΕࢠ • ໊લۭؒ • ࢛ଇԋࢉ -FTT -FBOFS
    $44
15. © OSCA ࣍ͷΑ͏ʹࢥͬͨਓ͕͍Δ͔΋͠Ε·ͤΜͶɻ • $44
    ͱ͸ผʹϝλݴޠ֮͑ΔͷΊΜͲͤ͘ʔʂ • ࢖͍͍͚ͨͲɺϓϩδΣΫτద༻Ͱ͖Δؾ͕͠ͳ͍ʂ • νʔϜͰͷֶशίετ͸Ͳ͏ͳΜͩΖ͏ʁ • ϓϩάϥϚ͡Όͳͯ͘΋ѻ͑Δͷʁ ΍ͬͺΓɺ͜ΕΒΛߟ্ྀͨ͠ͰͷϓϩδΣΫτಋೖ͕ඞཁɻ Ͳ͏ʁ ࢖͍͍ͨͱࢥͬͨʁ
16. © OSCA ͓ΘΓʹ • $44ϓϦϓϩηοαͷܦݧऀ͕पΓʹ͍ͳ͍ͷͰɺܦݧ ऀͷํͷ͓࿩͕ฉ͚ͨΒخ͍͠Ͱ͢ɻ