New_Sass_Module_System.pdf

 New_Sass_Module_System.pdf

78d138a74c8135fe40735a286a71f4c7?s=128

IMANISHI TOSHIFUMI

January 15, 2020
Tweet

Transcript

  1. γϯɾ4BTT.PEVMF4ZTUFN .BSLVQ.FFUVQʛ+BO  ࠓ੢ढ़จ גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔ

  2. ࠓ੢ढ़จ ͍·ʹ͠ ϑϩϯτΤϯυΤϯδχΞ !UPTIJNBSOJF UPTIJGVNJJNBOJTIJ ͱ͠;Έ

  3. %BSU4BTTͰ৽͍͠ϞδϡʔϧγεςϜ͕ ϦϦʔε͞Ε·ͨ͠

  4. !VTFͱ!GPSXBSEͷ௥Ճ !JNQPSUͷഇࢭʢ౰໘͸૬ޓӡ༻͢ΔͨΊɺαϙʔτ͢Δʣ ࠶ར༻ͷ࠷΋؆୯ͳΞϓϩʔν͸ɺ@import ʹͳΓ·͢ɻ͔͠͠ɺ@import ʹ͸ଟ͘ͷ໰୊͕જ ΜͰ͍·ͨ͠ɻಉҰϑΝΠϧʹෳ਺ͷ @import ΛಡΈࠐΉ͜ͱͰίϯύΠϧ଎౓͕௿Լ͢Δɺϥ ΠϒϥϦͷ։ൃऀ͸໊લۭؒΛඞཁͱ͢ΔɺΧϓηϧԽ͕ͳ͍ɺಛఆͷม਺΍ mixin

    ͷࢀরݩ͕ ࠔ೉ɺCSS ͷ @import ͱฆΒΘ͍͠ͳͲ͕͋Γ·͢ɻ → ৽͍͠ϞδϡʔϧγεςϜ͸͜ΕΒͷ໰୊Λରॲ͠ɺݱࡏͷϓϩάϥϛϯάݴޠͰ࣮ূ͞Εͯ ͍ΔϕετϓϥΫςΟεʹ߹ΘͤΔ͜ͱΛ໨ඪͱ͍ͯ͠·͢ɻ ৽͍͠ϞδϡʔϧγεςϜͱ͸
  5. HVMQͰ৽͍͠ϞδϡʔϧγεςϜΛࢼ͢ $ npm install sass save-dev

  6. HVMQͰ৽͍͠ϞδϡʔϧγεςϜΛࢼ͢ HVMQpMFKT const gulp = require('gulp'); const sass = require('gulp-sass');

    sass.compiler = require('sass'); ͜ͷ 1 ߦΛ௥Ճ͢Δ
  7. w ม਺΍NJYJO͸άϩʔόϧͰ͸ͳ͘ͳΓɺݱࡏͷελΠϧγʔτͰͷΈʢϓϥΠϕʔτͱ͠ ͯʣద༻͞Ε·͢ɻ w !VTFͷσϑΥϧτͷ໊લۭؒ͸ɺΠϯϙʔτͨ͠ϑΝΠϧ໊ʹج͍ͮͯੜ੒͠·͢ɻ໊લۭ ؒΛ໌ࣔతʹઃఆ͢Δ͜ͱ΋ՄೳͰ͢ɻ ʢϫΠϧυΧʔυʣΛ༻͍Ε͹ɺτοϓϨϕϧͷ໊લ ۭؒʢ໊લۭؒͳ͠ʣʹͳΓ·͢ɻ !VTFͷಛ௃

  8. !VTFͷಛ௃ʛσΟϨΫτϦߏ੒ 4$44 @WBSJBCMFTTDTT @CBTFTDTT GPVOEBUJPO 4$44 4$44 NBJOTDTT ม਺Λ؅ཧ͢ΔϑΝΠϧ ϝΠϯͷελΠϧ

    ϓϩδΣΫτʹ͓͚ΔجຊతͳελΠϧ
  9. !VTFͷಛ௃ @WBSJBCMFTTDTT $font-size-sm: 1rem !default; GPVOEBUJPO@CBTFTDTT html { font-size: $font-size-sm;

    } NBJOTDTT @import "variables"; @import "foundation/base"; ैདྷͷॻ͖ํ @WBSJBCMFTTDTT $font-size-sm: 1rem !default; GPVOEBUJPO@CBTFTDTT @use "variables"; html { font-size: variables.$font-size-sm; } NBJOTDTT @import "foundation/base"; ৽͍͠ॻ͖ํ ໊લۭؒ͸Πϯϙʔτͨ͠ϑΝΠϧ໊ʹج͍ͮͯੜ੒
  10. !VTFͷಛ௃ @WBSJBCMFTTDTT $font-size-sm: 1rem !default; GPVOEBUJPO@CBTFTDTT html { font-size: $font-size-sm;

    } NBJOTDTT @import "variables"; @import "foundation/base"; ैདྷͷॻ͖ํ @WBSJBCMFTTDTT $font-size-sm: 1rem !default; GPVOEBUJPO@CBTFTDTT @use "variables" as v; html { font-size: v.$font-size-sm; } NBJOTDTT @import "foundation/base"; ৽͍͠ॻ͖ํ ໊લۭؒͷࢦఆ
  11. !VTFͷಛ௃ʛϥΠϒϥϦͷϢʔεέʔε @WBSJBCMFTTDTT $font-size-sm: 1rem !default; GPVOEBUJPO@CBTFTDTT $font-size-sm: 1.2rem !default; html

    { font-size: $font-size-sm; } NBJOTDTT @import "variables"; @import "foundation/base"; ैདྷͷॻ͖ํ @WBSJBCMFTTDTT $font-size-sm: 1rem !default; GPVOEBUJPO@CBTFTDTT @use "variables" with ( $font-size-sm: 1.2rem ); html { font-size: variables.$font-size-sm; } NBJOTDTT @import "foundation/base"; ৽͍͠ॻ͖ํ GPOUTJ[FSFNʹͳΔ XJUI۟ͷαϙʔτ GPOUTJ[FSFNͷ··
  12. !VTFͷಛ௃ʛϓϥΠϕʔτม਺ @WBSJBCMFTTDTT $_font-size-sm: 1rem !default; GPVOEBUJPO@CBTFTDTT html { font-size: $_font-size-sm;

    } NBJOTDTT @import "variables"; @import "foundation/base"; ैདྷͷॻ͖ํ @WBSJBCMFTTDTT $_font-size-sm: 1rem !default; NBJOTDTT @import "foundation/base"; ৽͍͠ॻ͖ํ GPVOEBUJPO@CBTFTDTT @use "variables"; html { font-size: variables.$_font-size-sm; } ΞΫηεΤϥʔ ม਺໊͕@PSͰ࢝·Δ৔߹ɺϓϥΠϕʔτม਺ѻ͍ʹͳΔ ΞΫηεՄ
  13. !GPSXBSE͸ɺม਺ɺNJYJOͳͲͷϞδϡʔϧΛؚΜͩ"1*ͱͯ͠ΤΫεϙʔτ͠·͢ɻ!VTF ͱ͸ҟͳΓɺ!GPSXBSEΛએݴ͍ͯ͠ΔϑΝΠϧ಺Ͱ͸ͦͷϞδϡʔϧΛࢀরͰ͖·ͤΜɻύʔ γϟϧΛར༻ͯ͠4BTTϑΝΠϧΛ෼ׂ͢Δ؅ཧʢFHϥΠϒϥϦ։ൃʣʹ໾ཱͪ·͢ɻ !GPSXBSEͷಛ௃

  14. !GPSXBSEͷಛ௃ʛσΟϨΫτϦߏ੒ 4$44 NBJOTDTT ϝΠϯͷελΠϧ 4$44 @GVODUJPOTTDTT @CSFBLQPJOUTTDTT NJYJOT 4$44 ϒϨʔΫϙΠϯτͷNJYJOΛ؅ཧ͢ΔϑΝΠϧ

    4$44 @BQJTDTT ϞδϡʔϧΛΤΫεϙʔτ͢Δ"1*ϑΝΠϧ ؔ਺Λ؅ཧ͢ΔϑΝΠϧ 4$44 @WBSJBCMFTTDTT ม਺Λ؅ཧ͢ΔϑΝΠϧ
  15. !GPSXBSEͷಛ௃ @WBSJBCMFTTDTT $breakpoints: ( sm: 0, md: 768px, lg: 1280px

    ) !default; $font-size-sm: 1rem !default; ֤ϒϨʔΫϙΠϯτͷઃఆ
  16. !GPSXBSEͷಛ௃ @GVODUJPOTTDTT @use "variables" as var; @function breakpoint-min($name) { $min:

    map-get(var.$breakpoints, $name); @return if($min != 0, $min, null); } @function vw($pixel, $viewport: 750) { @return $pixel * 100 / $viewport * 1vw; } ม਺ͷಡΈࠐΈ ϒϨʔΫϙΠϯτͷNJYJOͷϔϧύʔؔ਺ WXͷศརؔ਺
  17. !GPSXBSEͷಛ௃ NJYJOT@CSFBLQPJOUTTDTT @use "../functions" as fn; @mixin breakpoint-up($name) { $min:

    fn.breakpoint-min($name); @if $min { @media (min-width: $min) { @content; } } @else { @content; } } ؔ਺ͷಡΈࠐΈ
  18. !GPSXBSEͷಛ௃ @BQJTDTT @forward "variables"; @forward "functions"; @forward "mixins/breakpoints"; NBJOTDTT @use

    "api"; * { @include api.breakpoint-up(md) { margin: 0 api.vw(20); font-size: api.$font-size-sm; } } ม਺ɺNJYJOͳͲͷϞδϡʔϧΛؚΜͩ"1*ͷΤΫεϙʔτ "1*ͷΠϯϙʔτ
  19. 4BTTʹ͸ศརͳػೳΛؚΉଟ͘ͷ૊ΈࠐΈϞδϡʔϧ͕͋Γ·͢ɻ͜ΕΒͷϞδϡʔϧ͸ !VTFͰΠϯϙʔτ͠·͢ɻ͢΂ͯͷ૊ΈࠐΈϞδϡʔϧ͸TBTTܦ༝ͰΠϯϙʔτ͠·͢ɻै དྷͷάϩʔόϧͷར༻͸ඇਪ঑ʹͳΓ·͢ɻ࠷ऴతʹ͸ഇࢭʹͳΓ·͕͢ɺݱࡏ͸ݹ͍4BTT όʔδϣϯɺ͓Αͼɺ-JC4BTTͷޓ׵ੑͷͨΊར༻ՄೳͰ͢ɻ ૊ΈࠐΈϞδϡʔϧ

  20. ૊ΈࠐΈϞδϡʔϧ wTBTTNBUI wTBTTTUSJOH wTBTTDPMPS wTBTTMJTU wTBTTNBQ wTBTTTFMFDUPS wTBTTNFUB

  21. ૊ΈࠐΈϞδϡʔϧʛTBTTNFUB NBJOTDTT @use "sass:meta"; :root { @if $mode == "development"

    { @include meta.load-css("_partials/test"); } } NFUBMPBEDTT ͸ɺ৽͍͠૊ΈࠐΈNJYJOTʹͳΓ·͢ɻ ͪͳΈʹ!JNQPSUͰ͸ΤϥʔʹͳΓ·͢ɻ
  22. ࣗಈҠߦ $ npx sass-migrator module migrate-deps < lepath>

  23. %BSU4BTTͱ-JC4BTTͷ྆ݴޠ͕ϞδϡʔϧγεςϜΛαϙʔτͨ͠೥ޙɺ·ͨ͸ɺ %BSU4BTT͕ϞδϡʔϧγεςϜͷαϙʔτΛ։͔࢝ͯ͠Β೥ޙͷ͍ͣΕ͔ૣ͍ظݶʢ஗ ͘ͱ΋೥݄೔ʣʹඇਪ঑ʹͳΔ༧ఆ ඇਪ঑͔Β೥ޙʢ஗͘ͱ΋೥݄೔ʣαϙʔτΛऴྃ༧ఆ !JNQPSUͷ׬શഇࢭ͸͍ͭʁ

  24. ॴײ w ϑΝΠϧͷґଘؔ܎͕໌֬ʹͳΔ w ໊લۭؒ͸ɺ$44ؔ਺ɺ4BTTؔ਺ɺಠࣗؔ਺ͷ੗Έ෼͚͕Ͱ͖Δ w ϓϥΠϕʔτม਺ʹΑΔΧϓηϧԽ͕Ͱ͖Δ w ΤίγεςϜ͸ա౉ظ

  25. ·ͱΊ w ৽͍͠ϞδϡʔϧγεςϜ͸%BSU4BTTͷ࠷৽൛Ͱར༻Մೳ w !VTF͸ಡΈࠐΈݩͷελΠϧγʔτͷΈͰ༗ޮ w ૊ΈࠐΈϞδϡʔϧ͸!VTFܦ༝ͰΠϯϙʔτ͢Δ w .JHSBUPSͰࣗಈҠߦͰ͖Δ w

    !JNQPSU͸དྷ೥ʹඇਪ঑ɺ࠶དྷ೥ʹ׬શഇࢭ
  26. גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔͰ͸ɺ ΤϯδχΞɺσβΠφʔΛืू͓ͯ͠Γ·͢ɻ

  27. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠