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

78d138a74c8135fe40735a286a71f4c7?s=47 IMANISHI TOSHIFUMI
September 18, 2019
Technology
3
1.9k

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

78d138a74c8135fe40735a286a71f4c7?s=128

IMANISHI TOSHIFUMI

September 18, 2019
Tweet

Want more?

78d138a74c8135fe40735a286a71f4c7?s=48 toshifumiimanishi
0
24
78d138a74c8135fe40735a286a71f4c7?s=48 toshifumiimanishi
2
420
78d138a74c8135fe40735a286a71f4c7?s=48 toshifumiimanishi
0
17
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
10
530
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
2
270
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
180
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
340
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
6
220
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
300
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
570
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
170
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
250

Transcript

  1. 1.

    8FC੍࡞ऀͷͨΊͷ4BTTͷࢀߟॻ Sep 18, 2019 / Toshifumi Imanishi

  2. 2.

    ຊ೔ɺ࿩͢಺༰ w 4BTTͱ͸ w 4BTTͷྺ࢙ w ଞͷ$44ϝλݴޠ w ΋͏গ͠4BTTΛ۷ΓԼ͛ͨ࿩ w

    ৽ϞδϡʔϧγεςϜ ඇΤϯδχΞ޲͚ ΤϯδχΞ޲͚
  3. 3.

    4BTTͱ͸ʁ 4BTTʢ4ZOUBDUJDBMMZ"XTPNF4UZMFTIFFUTʣͱ͸ɺ$44Λ֦ுͨ͠ݴޠͰ͢ɻ$44͸޿͘ී ٴͤ͞Δ໨త΋͋ͬͯॻࣜࣗମ͸γϯϓϧͳͷͰ͕͢ɺϓϩάϥϜͰ͸౰ͨΓલͷΑ͏ʹඋ͑ͯ ͍Δػೳ͕͋Γ·ͤΜɻͦͷΑ͏ͳ$44ͷऑ఺Λิ͏໨తͰ஀ੜͨ͠ͷ͕4BTTʹͳΓ·͢ɻ 4BTTͷެࣜαΠτʢ೥݄ݱࡏʣIUUQTTBTTMBOHDPN

  4. 4.

    4BTT͸ͳͥ஀ੜͨ͠ͷ͔ʁ ࡢࠓͷ8FCαΠτ੍࡞ʹ͸ɺϚϧνσόΠεͷରԠ΍ɺ3FUJOBσΟεϓϨΠͳͲͷߴղ૾౓ σΟεϓϨΠ΁ͷରԠɺϨεϙϯγϒ8FCσβΠϯͳͲɺ$44ʹٻΊΒΕΔཁ͕݅ଟ༷Խ͠ ͍ͯ·͢ɻ͔͠͠ɺ։ൃऀʹٻΊΒΕΔػೳ͕$44ͷ࢓༷ʹ௥Ճ͞ΕΔʹ͸૬౰ͳ೥݄͕͔͔ Γ·͢ɻ ˠͦ͜ͰɺϝλݴޠʹͲΜͲΜػೳΛ௥Ճ͠ɺϩʔΧϧ؀ڥͰಈ࡞͢ΔϓϩάϥϜʹΑΓɺ $44ͷ࢓༷ʹม׵͢Ε͹Α͍ͱ͍͏ߟ͕͑ੜ·Ε·ͨ͠ɻͦΕ͕4BTTͷ஀ੜʹͳΓ·͢ɻ

  5. 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. 6.

    ͞·͟·ͳ$44ϝλݴޠ w -&44ɿ+BWB4DSJQU੡ɺաڈʹ#PPUTUSBQͰ࠾༻͞Ε͍ͯͨ w 4UZMVTɿ4BTT΍-&44ΑΓޙൃͷϝλݴޠɺ4"44ه๏ʹ͍ۙ ͱ͸͍͑ɺ4BTT͕$44ϝλݴޠͷσϑΝΫτελϯμʔυʹͳΓ·͢ɻݱࡏͰ͸ #PPUTUSBQͰ΋࠾༻͞Ε͍ͯ·͢ɻ

  7. 7.

    ͔͜͜Βɺ΋͏গ͠۷ΓԼ͛ͨ࿩ ʢΤϯδχΞ޲͚ʣ!

  8. 8.

    ͞·͟·ͳ4BTT w 3VCZ4BTTɿ࠷ॳͷ4BTTɺ೥݄ʹαϙʔτऴྃ w -JC4BTTɿ͞·͟·ͳݴޠͰ4BTTΛѻ͏ͨΊͷϥΠϒϥϦ w %BSU4BTTɿ%BSUݴޠͰॻ͔Εͨ4BTTɺઌߦͯ͠ػೳ͕࣮૷͞ΕΔ ※1 Dart ͱ͸

    Google ʹΑͬͯ։ൃ͞Εͨϓϩάϥϛϯάݴޠ ※1
  9. 9.

    ͑ɺͳΜͰ%BSUʁ

  10. 10.

    %BSUͷٕज़બఆͷཧ༝ ͞·͟·ͳݴޠ͔Β%BSU͕બ͹Εͨཧ༝ΛҎԼʹࣔ͠·͢ɻ w ಈ࡞଎౓͕଎͍ʢ3VCZ4BTTΑΓߴ଎ʣ w +BWB4DSJQUʹޓ׵ੑ͕͋ΔʢίϯύΠϧͰ͖Δʣ ಛʹ/PEF4BTT"1*ͱͷޓ׵ੑʹয఺ΛҠͨ͜͠ͱ͕ཧ༝ʹͳΓ·͢ɻ ͦͯ͠ɺ%BSU4BTTͷొ৔ʹΑΓ3VCZ4BTTͷαϙʔτऴྃʹഥं͕͔͔Γ·ͨ͠ɻ

  11. 11.

    ઌ೔ɺ৽ϞδϡʔϧγεςϜͷϓϨϏϡʔ൛͕ެ։

  12. 12.

    ৽ϞδϡʔϧγεςϜͱ͸ w !VTFͱ!GPSXBSEͷ௥Ճ w !JNQPSUͷഇࢭʢ౰໘͸૬ޓӡ༻͢ΔͨΊɺαϙʔτ͢Δʣ ࠶ར༻ͷ࠷΋؆୯ͳΞϓϩʔν͸ɺ@import ʹͳΓ·͢ɻ͔͠͠ɺ@import ʹ͸ଟ͘ͷ໰୊͕જ ΜͰ͍·ͨ͠ɻಉҰϑΝΠϧʹෳ਺ͷ @import

    ΛಡΈࠐΉ͜ͱͰίϯύΠϧ଎౓͕௿Լ͢Δɺϥ ΠϒϥϦͷ։ൃऀ͸໊લۭؒΛඞཁͱ͢ΔɺΧϓηϧԽ͕ͳ͍ɺಛఆͷม਺΍ mixin ͷࢀরݩ͕ ࠔ೉ͳͲ͕͋Γ·͢ɻ → ৽͍͠ϞδϡʔϧγεςϜ͸͜ΕΒͷ໰୊Λରॲ͠ɺݱࡏͷϓϩάϥϛϯάݴޠͰ࣮ূ͞Εͯ ͍ΔϕετϓϥΫςΟεʹ߹ΘͤΔ͜ͱΛ໨ඪͱ͍ͯ͠·͢ɻ
  13. 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  ԼهίϚϯυϥΠϯΛ࣮ߦ͢Δ
 ʢ͸%BSU4BTTͷϚΠφʔόʔδϣϯʹͳΓ·͢ʣ  %BSU4BTTܦ༝ͰίϯύΠϧ͢ΔΑ͏ʹHVMQpMFKTΛઃఆ͢Δ
 ʢσϑΥϧτͰ͸/PEF4BTTܦ༝ͰίϯύΠϧ͞Ε·͢ʣ
  14. 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. 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. 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. 17.

    ࢼͯ͠ΈͯΘ͔ͬͨ͜ͱɺॴײ ৽ͨͳϞδϡʔϧγεςϜ͸ɺม਺΍NJYJOͳͲΛάϩʔόϧʹࢀর͢Δ͜ͱ͸Ͱ͖·ͤΜɻ͜ Ε͸ɺ໨ඪʢ)JHI-FWFMʣʹ͋Δہॴੑʹ֘౰͠·͢ɻ৽ͨͳϞδϡʔϧγεςϜ͸ɺͦͷ 4BTTϑΝΠϧͷΈͰཧղͰ͖ΔΑ͏ʹ͢΂͖Ͱ͢ɻ·ͨɺ։ൃऀ͸ଞͷϑΝΠϧͷ໊લͷিಥ Λؾʹ͢Δ͜ͱͳ͘։ൃͰ͖ΔΑ͏ʹͳΓ·͢ɻ !JNQPSU͕ഇࢭ͞ΕΔʢ౰໘͸αϙʔτʣ͜ͱ͸ɺݱࡏͷ4BTTͷΤίγεςϜʹେ͖͘Өڹ Λٴ΅͢Ͱ͠ΐ͏ɻ͔͠͠ɺ৽ͨͳϞδϡʔϧγεςϜ͸ɺ͜Ε͔Βͷ։ൃʹେ͖͘د༩͢ΔͰ ͠ΐ͏ɻ ※1 ※1ϞδϡʔϧγεςϜͷ໨ඪʹ͸ɺHigh-Level

    ͱLow-Level ͕͋Γ·͢ɻ
  18. 18.

    ͝੩ௌ͋Γ͕ͱ͏͍͟͝·͢