Web制作者のためのSassの参考書.pdf

Transcript

1. 8FC
   ੍࡞ऀͷͨΊͷ
   4BTT
   ͷࢀߟॻ Sep 18, 2019 / Toshifumi Imanishi
2. ຊ೔ɺ࿩͢಺༰ w 4BTT
   ͱ͸
   w 4BTT
   ͷྺ࢙
   w ଞͷ
   $44
   ϝλݴޠ
   w ΋͏গ͠
   4BTT
   Λ۷ΓԼ͛ͨ࿩
   w ৽ϞδϡʔϧγεςϜ ඇΤϯδχΞ޲͚ ΤϯδχΞ޲͚
3. 4BTT
   ͱ͸ʁ 4BTTʢ4ZOUBDUJDBMMZ
   "XTPNF
   4UZMFTIFFUTʣͱ͸ɺ$44
   Λ֦ுͨ͠ݴޠͰ͢ɻ$44
   ͸޿͘ී ٴͤ͞Δ໨త΋͋ͬͯॻࣜࣗମ͸γϯϓϧͳͷͰ͕͢ɺϓϩάϥϜͰ͸౰ͨΓલͷΑ͏ʹඋ͑ͯ ͍Δػೳ͕͋Γ·ͤΜɻͦͷΑ͏ͳ
   $44
   ͷऑ఺Λิ͏໨తͰ஀ੜͨ͠ͷ͕
   4BTT
   ʹͳΓ·͢ɻ 4BTT
   ͷެࣜαΠτʢ೥݄ݱࡏʣIUUQTTBTTMBOHDPN
4. 4BTT
   ͸ͳͥ஀ੜͨ͠ͷ͔ʁ ࡢࠓͷ
   8FC
   αΠτ੍࡞ʹ͸ɺϚϧνσόΠεͷରԠ
   ΍ɺ3FUJOB
   σΟεϓϨΠͳͲͷ
   ߴղ૾౓ σΟεϓϨΠ΁ͷରԠɺϨεϙϯγϒ
   8FC
   σβΠϯ
   ͳͲɺ$44
   ʹٻΊΒΕΔཁ͕݅ଟ༷Խ͠ ͍ͯ·͢ɻ͔͠͠ɺ։ൃऀʹٻΊΒΕΔػೳ͕
   $44
   ͷ࢓༷ʹ௥Ճ͞ΕΔʹ͸૬౰ͳ೥݄͕͔͔ Γ·͢ɻ
   ˠ
   ͦ͜ͰɺϝλݴޠʹͲΜͲΜػೳΛ௥Ճ͠ɺϩʔΧϧ؀ڥͰಈ࡞͢ΔϓϩάϥϜʹΑΓɺ $44
   ͷ࢓༷ʹม׵͢Ε͹Α͍ͱ͍͏ߟ͕͑ੜ·Ε·ͨ͠ɻͦΕ͕
   4BTT
   ͷ஀ੜʹͳΓ·͢ɻ
5. 4BTT
   ͸ɺTDTT
   ͱ͍͏֦ுࢠͷϑΝΠϧͰهड़͢Δͷ͕σϑΝΫτελϯμʔυʹͳΓ·͢ɻ΋ ͪΖΜɺTBTT
   ͱ͍͏֦ுࢠͷϑΝΠϧ΋͋Γ·͢ɻʢެ։౰ॳ͸ɺ4"44
   ه๏ͷΈʣ྆ऀʹ͸ ه๏ͷҧ͍͕͋Γɺ4$44
   ه๏͕
   $44
   ͱಉ͡ه๏Λ࠾༻ɺΏ͑ʹ
   $44
   ʹޓ׵ੑ͕͋Γ·͢ɻ 4$44
   ه๏ͷ஀ੜ͕ɺ4BTT
   ʹ஫໨ΛूΊ·ͨ͠ɻ 4BTT
   ͚ͩͲ
   4$44
   ϑΝΠϧ body { font-size: 1.6rem; word-wrap: break-word; } SCSS ه๏ body font-size: 1.6rem word-wrap: break-word SASS ه๏ 2006 ೥ʹ Sass ެ։ Sass 3.0
6. ͞·͟·ͳ
   $44
   ϝλݴޠ w -&44ɿ+BWB4DSJQU
   ੡ɺաڈʹ
   #PPUTUSBQ
   Ͱ࠾༻͞Ε͍ͯͨ
   w 4UZMVTɿ4BTT
   ΍
   -&44
   ΑΓޙൃͷϝλݴޠɺ4"44
   ه๏ʹ͍ۙ
   ͱ͸͍͑ɺ4BTT
   ͕
   $44
   ϝλݴޠͷσϑΝΫτελϯμʔυ
   ʹͳΓ·͢ɻݱࡏͰ͸
   #PPUTUSBQ
   Ͱ΋࠾༻͞Ε͍ͯ·͢ɻ
7. ͔͜͜Βɺ΋͏গ͠۷ΓԼ͛ͨ࿩ ʢΤϯδχΞ޲͚ʣ!
8. ͞·͟·ͳ
   4BTT
   w 3VCZ
   4BTTɿ࠷ॳͷ
   4BTTɺ
   ೥
   
   ݄ʹαϙʔτऴྃ
   w -JC4BTTɿ͞·͟·ͳݴޠͰ
   4BTT
   Λѻ͏ͨΊͷϥΠϒϥϦ
   w %BSU
   4BTTɿ%BSU
   ݴޠͰॻ͔Εͨ
   4BTTɺઌߦͯ͠ػೳ͕࣮૷͞ΕΔ ※1 Dart ͱ͸ Google ʹΑͬͯ։ൃ͞Εͨϓϩάϥϛϯάݴޠ ※1
9. ͑ɺͳΜͰ
   %BSUʁ
10. %BSU
    ͷٕज़બఆͷཧ༝ ͞·͟·ͳݴޠ͔Β
    %BSU
    ͕બ͹Εͨཧ༝ΛҎԼʹࣔ͠·͢ɻ
    w ಈ࡞଎౓͕଎͍ʢ3VCZ
    4BTT
    ΑΓߴ଎ʣ
    w +BWB4DSJQU
    ʹޓ׵ੑ͕͋ΔʢίϯύΠϧͰ͖Δʣ
    ಛʹ
    /PEF
    4BTT
    "1*
    ͱͷޓ׵ੑʹয఺ΛҠͨ͜͠ͱ͕ཧ༝ʹͳΓ·͢ɻ
    ͦͯ͠ɺ%BSU
    4BTT
    ͷొ৔ʹΑΓ
    3VCZ
    4BTT
    ͷαϙʔτऴྃ
    ʹഥं͕͔͔Γ·ͨ͠ɻ
11. ઌ೔ɺ৽ϞδϡʔϧγεςϜͷϓϨϏϡʔ൛͕ެ։
    
12. ৽ϞδϡʔϧγεςϜͱ͸ w !VTF
    ͱ
    !GPSXBSE
    ͷ௥Ճ
    w !JNQPSU
    ͷഇࢭʢ౰໘͸૬ޓӡ༻͢ΔͨΊɺαϙʔτ͢Δʣ ࠶ར༻ͷ࠷΋؆୯ͳΞϓϩʔν͸ɺ@import ʹͳΓ·͢ɻ͔͠͠ɺ@import ʹ͸ଟ͘ͷ໰୊͕જ ΜͰ͍·ͨ͠ɻಉҰϑΝΠϧʹෳ਺ͷ @import ΛಡΈࠐΉ͜ͱͰίϯύΠϧ଎౓͕௿Լ͢Δɺϥ ΠϒϥϦͷ։ൃऀ͸໊લۭؒΛඞཁͱ͢ΔɺΧϓηϧԽ͕ͳ͍ɺಛఆͷม਺΍ mixin ͷࢀরݩ͕ ࠔ೉ͳͲ͕͋Γ·͢ɻ → ৽͍͠ϞδϡʔϧγεςϜ͸͜ΕΒͷ໰୊Λରॲ͠ɺݱࡏͷϓϩάϥϛϯάݴޠͰ࣮ূ͞Εͯ ͍ΔϕετϓϥΫςΟεʹ߹ΘͤΔ͜ͱΛ໨ඪͱ͍ͯ͠·͢ɻ
13. HVMQ
    Ͱ৽ϞδϡʔϧγεςϜΛࢼ͢ const gulp = require('gulp'); const sass = require('gulp-sass'); sass.compiler = require('sass'); ͜ͷ 1 ߦΛ௥Ճ͢Δ $ npm install -g sass@1.23.0-module.beta.1  ԼهίϚϯυϥΠϯΛ࣮ߦ͢Δ
 ʢ
    ͸%BSU
    4BTT
    ͷϚΠφʔόʔδϣϯʹͳΓ·͢ʣ  %BSU
    4BTT
    ܦ༝ͰίϯύΠϧ͢ΔΑ͏ʹ
    HVMQpMFKT
    Λઃఆ͢Δ
 ʢσϑΥϧτͰ͸
    /PEF
    4BTT
    ܦ༝ͰίϯύΠϧ͞Ε·͢ʣ
14. !JNQPSU
    ͔Β
    !VTF
    ͷॻ͖׵͑ ม਺΍
    NJYJO
    ͸άϩʔόϧͰ͸ͳ͘ͳΓɺݱࡏͷελΠϧγʔτͰͷΈʢϓϥΠϕʔτͱͯ͠ʣ ద༻͞Ε·͢ɻ // main.scss @import “variables"; @import "foundation/base"; // _foundation/base.scss html { font-size: $font-size-sm; } // _variables.scss $font-size-sm: 1rem !default; // main.scss @use "foundation/base"; // _foundation/base.scss @use "variables"; html { font-size: variables.$font-size-sm; } // _variables.scss $font-size-sm: 1rem !default;
15. ೚ҙͷ໊લۭؒΛ΋ͨͤΔ !VTF
    ͷσϑΥϧτͷ໊લۭؒ͸ɺΠϯϙʔτͨ͠ϑΝΠϧ໊ʹΑܾͬͯ·Γ·͢ɻ΋ͪΖΜɺ ໊લۭؒΛ໌ࣔతʹઃఆ͢Δ͜ͱ΋ՄೳͰ͢ɻ ʢϫΠϧυΧʔυʣΛ༻͍Ε͹ɺτοϓϨϕϧͷ ໊લۭؒʢ໊લۭؒͳ͠ʣʹͳΓ·͢ɻ // main.scss @import "foundation/base"; // _foundation/base.scss @use “variables"; html { font-size: variables.$font-size-sm; } // _variables.scss $font-size-sm: 1rem !default; // main.scss @use "foundation/base"; // _foundation/base.scss @use "variables" as var; html { font-size: var.$font-size-sm; } // _variables.scss $font-size-sm: 1rem !default;
16. !GPSXBSE
    ͸ɺଞͷϞδϡʔϧͷม਺ɺNJYJO
    ͳͲΛؚΜͩϞδϡʔϧͱͯ͠ΤΫεϙʔτ͠· ͢ɻύʔγϟϧΛར༻ͯ͠
    4BTT
    ϑΝΠϧΛ෼ׂ͢Δ؅ཧʹ໾ཱͪ·͢ɻ!GPSXBSE
    ͰΠϯϙʔ τ͞ΕͨϞδϡʔϧʹ͸ɺ໊લۭؒΛؚΈ·ͤΜɻ !GPSXBSE
    Ͱ·ͱΊΔ // _base.scss @use "setting" as *; html { font-size: $font-size-sm; @include breakpoint-up(md) { font-size: $font-size-md; } } // _setting.scss @forward “variables”; @forward “mixins/breakpoints"; // _base.scss @use “variables"; @use “mixins/breakpoints"; html { font-size: variables.$font-size-sm; @include breakpoints.breakpoint-up(md) { font-size: variables.$font-size-md; } }
17. ࢼͯ͠ΈͯΘ͔ͬͨ͜ͱɺॴײ ৽ͨͳϞδϡʔϧγεςϜ͸ɺม਺΍
    NJYJO
    ͳͲΛάϩʔόϧʹࢀর͢Δ͜ͱ͸Ͱ͖·ͤΜɻ͜ Ε͸ɺ໨ඪʢ)JHI-FWFMʣʹ͋Δہॴੑʹ֘౰͠·͢ɻ৽ͨͳϞδϡʔϧγεςϜ͸ɺͦͷ
    4BTT
    ϑΝΠϧͷΈͰཧղͰ͖ΔΑ͏ʹ͢΂͖Ͱ͢ɻ·ͨɺ։ൃऀ͸ଞͷϑΝΠϧͷ໊લͷিಥ Λؾʹ͢Δ͜ͱͳ͘։ൃͰ͖ΔΑ͏ʹͳΓ·͢ɻ
    !JNQPSU
    ͕ഇࢭ͞ΕΔʢ౰໘͸αϙʔτʣ͜ͱ͸ɺݱࡏͷ
    4BTT
    ͷΤίγεςϜʹେ͖͘Өڹ Λٴ΅͢Ͱ͠ΐ͏ɻ͔͠͠ɺ৽ͨͳϞδϡʔϧγεςϜ͸ɺ͜Ε͔Βͷ։ൃʹେ͖͘د༩͢ΔͰ ͠ΐ͏ɻ ※1 ※1ϞδϡʔϧγεςϜͷ໨ඪʹ͸ɺHigh-Level ͱLow-Level ͕͋Γ·͢ɻ
18. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·͢