Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Avatar for IMANISHI TOSHIFUMI

IMANISHI TOSHIFUMI

September 18, 2019
Tweet

More Decks by IMANISHI TOSHIFUMI

Other Decks in Technology

Transcript

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

    ΛಡΈࠐΉ͜ͱͰίϯύΠϧ଎౓͕௿Լ͢Δɺϥ ΠϒϥϦͷ։ൃऀ͸໊લۭؒΛඞཁͱ͢ΔɺΧϓηϧԽ͕ͳ͍ɺಛఆͷม਺΍ mixin ͷࢀরݩ͕ ࠔ೉ͳͲ͕͋Γ·͢ɻ → ৽͍͠ϞδϡʔϧγεςϜ͸͜ΕΒͷ໰୊Λରॲ͠ɺݱࡏͷϓϩάϥϛϯάݴޠͰ࣮ূ͞Εͯ ͍ΔϕετϓϥΫςΟεʹ߹ΘͤΔ͜ͱΛ໨ඪͱ͍ͯ͠·͢ɻ
  2. HVMQͰ৽ϞδϡʔϧγεςϜΛࢼ͢ const gulp = require('gulp'); const sass = require('gulp-sass'); sass.compiler

    = require('sass'); ͜ͷ 1 ߦΛ௥Ճ͢Δ $ npm install -g [email protected]  ԼهίϚϯυϥΠϯΛ࣮ߦ͢Δ
 ʢ͸%BSU4BTTͷϚΠφʔόʔδϣϯʹͳΓ·͢ʣ  %BSU4BTTܦ༝ͰίϯύΠϧ͢ΔΑ͏ʹHVMQpMFKTΛઃఆ͢Δ
 ʢσϑΥϧτͰ͸/PEF4BTTܦ༝ͰίϯύΠϧ͞Ε·͢ʣ
  3. !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;
  4. ೚ҙͷ໊લۭؒΛ΋ͨͤΔ !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;
  5. !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; } }