New_Sass_Module_System.pdf

Transcript

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

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

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

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[F
    SFN
    ʹͳΔ XJUI
    ۟ͷαϙʔτ GPOUTJ[F
    SFN
    ͷ··

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

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

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

    !JNQPSU
    ͸དྷ೥ʹඇਪ঑ɺ࠶དྷ೥ʹ׬શഇࢭ

26. גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔͰ͸ɺ
    ΤϯδχΞɺσβΠφʔΛืू͓ͯ͠Γ·͢ɻ

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