New_Sass_Module_System.pdf

by IMANISHI TOSHIFUMI

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࠓ੢ढ़จ ͍·ʹ͠ ϑϩϯτΤϯυΤϯδχΞ !UPTIJNBSOJF UPTIJGVNJJNBOJTIJ ͱ͠;Έ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

!VTFͱ!GPSXBSEͷ௥Ճ !JNQPSUͷഇࢭʢ౰໘͸૬ޓӡ༻͢ΔͨΊɺαϙʔτ͢Δʣ ࠶ར༻ͷ࠷΋؆୯ͳΞϓϩʔν͸ɺ@import ʹͳΓ·͢ɻ͔͠͠ɺ@import ʹ͸ଟ͘ͷ໰୊͕જ ΜͰ͍·ͨ͠ɻಉҰϑΝΠϧʹෳ਺ͷ @import ΛಡΈࠐΉ͜ͱͰίϯύΠϧ଎౓͕௿Լ͢Δɺϥ ΠϒϥϦͷ։ൃऀ͸໊લۭؒΛඞཁͱ͢ΔɺΧϓηϧԽ͕ͳ͍ɺಛఆͷม਺΍ mixin ͷࢀরݩ͕ ࠔ೉ɺCSS ͷ @import ͱฆΒΘ͍͠ͳͲ͕͋Γ·͢ɻ → ৽͍͠ϞδϡʔϧγεςϜ͸͜ΕΒͷ໰୊Λରॲ͠ɺݱࡏͷϓϩάϥϛϯάݴޠͰ࣮ূ͞Εͯ ͍ΔϕετϓϥΫςΟεʹ߹ΘͤΔ͜ͱΛ໨ඪͱ͍ͯ͠·͢ɻ ৽͍͠ϞδϡʔϧγεςϜͱ͸

Slide 5

Slide 5 text

HVMQͰ৽͍͠ϞδϡʔϧγεςϜΛࢼ͢ $ npm install sass save-dev

Slide 6

Slide 6 text

HVMQͰ৽͍͠ϞδϡʔϧγεςϜΛࢼ͢ HVMQpMFKT const gulp = require('gulp'); const sass = require('gulp-sass'); sass.compiler = require('sass'); ͜ͷ 1 ߦΛ௥Ճ͢Δ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

!VTFͷಛ௃ʛσΟϨΫτϦߏ੒ 4$44 @WBSJBCMFTTDTT @CBTFTDTT GPVOEBUJPO 4$44 4$44 NBJOTDTT ม਺Λ؅ཧ͢ΔϑΝΠϧ ϝΠϯͷελΠϧ ϓϩδΣΫτʹ͓͚ΔجຊతͳελΠϧ

Slide 9

Slide 9 text

!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"; ৽͍͠ॻ͖ํ ໊લۭؒ͸Πϯϙʔτͨ͠ϑΝΠϧ໊ʹج͍ͮͯੜ੒

Slide 10

Slide 10 text

!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"; ৽͍͠ॻ͖ํ ໊લۭؒͷࢦఆ

Slide 11

Slide 11 text

!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ͷ··

Slide 12

Slide 12 text

!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Ͱ࢝·Δ৔߹ɺϓϥΠϕʔτม਺ѻ͍ʹͳΔ ΞΫηεՄ

Slide 13

Slide 13 text

!GPSXBSE͸ɺม਺ɺNJYJOͳͲͷϞδϡʔϧΛؚΜͩ"1*ͱͯ͠ΤΫεϙʔτ͠·͢ɻ!VTF ͱ͸ҟͳΓɺ!GPSXBSEΛએݴ͍ͯ͠ΔϑΝΠϧ಺Ͱ͸ͦͷϞδϡʔϧΛࢀরͰ͖·ͤΜɻύʔ γϟϧΛར༻ͯ͠4BTTϑΝΠϧΛ෼ׂ͢Δ؅ཧʢFHϥΠϒϥϦ։ൃʣʹ໾ཱͪ·͢ɻ !GPSXBSEͷಛ௃

Slide 14

Slide 14 text

!GPSXBSEͷಛ௃ʛσΟϨΫτϦߏ੒ 4$44 NBJOTDTT ϝΠϯͷελΠϧ 4$44 @GVODUJPOTTDTT @CSFBLQPJOUTTDTT NJYJOT 4$44 ϒϨʔΫϙΠϯτͷNJYJOΛ؅ཧ͢ΔϑΝΠϧ 4$44 @BQJTDTT ϞδϡʔϧΛΤΫεϙʔτ͢Δ"1*ϑΝΠϧ ؔ਺Λ؅ཧ͢ΔϑΝΠϧ 4$44 @WBSJBCMFTTDTT ม਺Λ؅ཧ͢ΔϑΝΠϧ

Slide 15

Slide 15 text

!GPSXBSEͷಛ௃ @WBSJBCMFTTDTT $breakpoints: ( sm: 0, md: 768px, lg: 1280px ) !default; $font-size-sm: 1rem !default; ֤ϒϨʔΫϙΠϯτͷઃఆ

Slide 16

Slide 16 text

!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ͷศརؔ਺

Slide 17

Slide 17 text

!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; } } ؔ਺ͷಡΈࠐΈ

Slide 18

Slide 18 text

!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*ͷΠϯϙʔτ

Slide 19

Slide 19 text

4BTTʹ͸ศརͳػೳΛؚΉଟ͘ͷ૊ΈࠐΈϞδϡʔϧ͕͋Γ·͢ɻ͜ΕΒͷϞδϡʔϧ͸ !VTFͰΠϯϙʔτ͠·͢ɻ͢΂ͯͷ૊ΈࠐΈϞδϡʔϧ͸TBTTܦ༝ͰΠϯϙʔτ͠·͢ɻै དྷͷάϩʔόϧͷར༻͸ඇਪ঑ʹͳΓ·͢ɻ࠷ऴతʹ͸ഇࢭʹͳΓ·͕͢ɺݱࡏ͸ݹ͍4BTT όʔδϣϯɺ͓Αͼɺ-JC4BTTͷޓ׵ੑͷͨΊར༻ՄೳͰ͢ɻ ૊ΈࠐΈϞδϡʔϧ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

૊ΈࠐΈϞδϡʔϧʛTBTTNFUB NBJOTDTT @use "sass:meta"; :root { @if $mode == "development" { @include meta.load-css("_partials/test"); } } NFUBMPBEDTT ͸ɺ৽͍͠૊ΈࠐΈNJYJOTʹͳΓ·͢ɻ ͪͳΈʹ!JNQPSUͰ͸ΤϥʔʹͳΓ·͢ɻ

Slide 22

Slide 22 text

ࣗಈҠߦ $ npx sass-migrator module migrate-deps < lepath>

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

·ͱΊ w ৽͍͠ϞδϡʔϧγεςϜ͸%BSU4BTTͷ࠷৽൛Ͱར༻Մೳ w !VTF͸ಡΈࠐΈݩͷελΠϧγʔτͷΈͰ༗ޮ w ૊ΈࠐΈϞδϡʔϧ͸!VTFܦ༝ͰΠϯϙʔτ͢Δ w .JHSBUPSͰࣗಈҠߦͰ͖Δ w !JNQPSU͸དྷ೥ʹඇਪ঑ɺ࠶དྷ೥ʹ׬શഇࢭ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠