Tweet
Tweet

Slide 1

Slide 1 text

sassc-railsΛར༻͍ͯ͠Δզʑ͸ɺSassͷ@importͷඇਪ঑ԽΛͲͷΑ͏ʹ৐Γӽ͍͔͑ͯ͘ Kaigi on Rails 2022 / @MH4GF Hirotaka Miyagi 1

Slide 2

Slide 2 text

Hirotaka Miyagi @MH4GF •ϑϦʔϥϯεΤϯδχΞ •גࣜձࣾϏοτδϟʔχʔ͞Μͷ Kibelaͷ։ൃνʔϜʹࢀՃ͍ͯ͠· ͢ 2

Slide 3

Slide 3 text

sassc-rails࢖ͬͯ·͔͢ 3

Slide 4

Slide 4 text

օ͞ΜͷϓϩδΣΫτͰ͜Μͳapplication.scss ͸͋Γ·ͤΜ͔ 4

Slide 5

Slide 5 text

͜ͷ@import͸ඇਪ঑ͱͳΓɺ࡟আ͕༧ఆ͞Ε͍ͯ·͢ ୅ΘΓͷϞδϡʔϧγεςϜͰ͋Δ@useΛ࢖͏͜ͱʹͳΓ·͢ 5 https://sass-lang.com/blog/the-module-system-is-launched#future-plans

Slide 6

Slide 6 text

• ͔͠͠sassc-railsͰ͸@use͸αϙʔτ͞Ε͍ͯ·ͤΜ😇 • ͱ͍͏͜ͱ͸@importΛ@useʹҠߦ͢Δલʹɺsassc-railsΛผͷԿ͔ʹม͑Δ ඞཁ͕͋Δͬͯ͜ͱ…!? 6

Slide 7

Slide 7 text

ࠓճͷηογϣϯͷ໨త͸ɺ ʮSassͷݱࡏ஍΍पล஌ࣝΛͬ͘͟Γཧղ͠ɺ ໌೔͔ΒҠߦͷΞΫγϣϯΛ࢝ΊΒΕΔঢ়ଶʯ ʹͳΔ͜ͱͰ͢ 7

Slide 8

Slide 8 text

ࠓ೔ͷΞδΣϯμ • Sassपลͷࣄલ஌ࣝͷ঺հ • Ҡߦʹ͓͚Δํ਑ • ҠߦϓϩηεͰؾ͍ͮͨ͜ͱ 8

Slide 9

Slide 9 text

Sassपลͷࣄલ஌ࣝͷ঺հ 9

Slide 10

Slide 10 text

Sassͱ͸ • CSSͷεʔύʔηοτɾϓϦϓϩηοα • ม਺ɾؔ਺ɾωετʹΑΔߏ଄Խ͕ಛ௃ 10

Slide 11

Slide 11 text

CSSؔ࿈ٕज़ • State of CSSʹΑΔௐࠪͰ͸Ϣʔ βʔ਺͕࠷΋ଟ͘ຬ଍౓΋্Ґʹ Ґஔ͍ͯ͠Δ 11 https://2021.stateofcss.com/ja-JP/technologies/

Slide 12

Slide 12 text

Sassͷ࣮૷ • Ruby Sass, LibSass, DartSass͕͋ΓɺDart SassͰݱࡏΞΫςΟϒͳ։ൃ͕ਐ ߦத • @use͸Dart Sassʹ͔࣮͠૷͞Ε͍ͯͳ͍ • sassc-rails͸LibSassΛ࣮ߦ͢Δ • Ruby Sass͸EOL ⚰ͰɺLibSass͸ඇਪ঑ • อक͸ܧଓ͞ΕΔ͕৽ػೳ͸αϙʔτ͞Εͳ͍ͨΊɺCSS/Sassߏจͷޓ ׵ੑ͔Βঃʑʹဃ཭͍ͯ͘͠ 12

Slide 13

Slide 13 text

@import • ϑΝΠϧ෼ׂΛ࣮ݱ͢ΔͨΊͷߏจ 13

Slide 14

Slide 14 text

@import͸ͳͥඇਪ঑ͳͷ͔ʁ • શͯͷfunctionɾmixinɾvariable͕άϩʔόϧͰΞΫηεͰ͖ΔΑ͏ ʹͳΔͨΊɺఆٛͷڝ߹͕͠͹͠͹ى͖Δ • ಛఆͷఆ͕ٛͲ͜Ͱ࢖ΘΕΔ͔Λ୳ࡧ͢Δ͜ͱ͕ࠔ೉ • ಉ͡ϑΝΠϧΛෳ਺ճ@importͰݺͼग़ͯ͠͠·ͬͨ৔߹ɺݺͼग़͠ ͨճ਺෼ධՁ͞Εͯ͠·͏ 14 https://sass-lang.com/documentation/at-rules/import

Slide 15

Slide 15 text

@use 15 ม਺ͱmixinΛఆٛ @useͰར༻Λએݴ cornersͷωʔϜεϖʔεͰݺͼग़͢

Slide 16

Slide 16 text

@use • ϝϯόݺͼग़͠ʹ໊લۭؒΛ໌ࣔ͢ΔͨΊɺάϩʔόϧͳఆٛͷॏෳ Λؾʹͤͣྑ͘ͳͬͨ 👍 • ಉ͡ϑΝΠϧΛෳ਺ճ@useͰݺͼग़ͯ͠΋Ұ౓ͷΈධՁ͢ΔΑ͏ʹ ͳͬͨ 👍 • privateͳม਺ͳͲɺՄࢹੑͷ੍ޚ͕Ͱ͖ΔΑ͏ʹͳͬͨ👍 16 https://sass-lang.com/documentation/at-rules/use

Slide 17

Slide 17 text

͍ͭ·Ͱʹ@useʹҠߦ͢Ε͹ྑ͍ͷ͔ʁ • ݩʑ͸2022/10/01·ͰʹϝδϟʔόʔδϣϯͷΞοϓάϨʔυΛ࣋ͬ ͯ࡟আ͞ΕΔ༧ఆ͕ͩͬͨɺLibSassͷඇਪ঑ԽΛड͚Ԇظ͞Εͨ • 80%ͷϢʔβʔ͕Dart SassʹҠߦ͢ΔͷΛ଴ͪɺͦͷޙগͳ͘ͱ΋1 ೥ɺ͓ͦΒ͘΋ͬͱ଴͔ͬͯΒ׬શʹ࡟আ͢Δ༧ఆ 17 https://sass-lang.com/blog/the-module-system-is-launched#future-plans

Slide 18

Slide 18 text

͍ͭ·Ͱʹ@useʹҠߦ͢Ε͹ྑ͍ͷ͔ʁ • NPMͷμ΢ϯϩʔυ਺Ͱ൑அ͍ͯ͠Δ sass / (sass + node-sass) • 8,098,297 / (8,098,297 + 2,677,869) = 75% (2022/10/22࣌఺) 18 https://github.com/sass/sass/issues/3276#issuecomment-1090803953 → 1೥Ҏ಺ͰҠߦ͓ͯ͘͠ͷ͕ແ೉

Slide 19

Slide 19 text

Ҡߦʹ͓͚Δํ਑ 19

Slide 20

Slide 20 text

Ҡߦʹ͓͚Δํ਑ 1. sassc-railsΛ࡟আ͠DartSassΛRailsͰ࢖͑ΔΑ͏ʹ͢Δ 2. @import͔Β@useʹ੾Γସ͑Δ 3. (@useΒ͍͠ઃܭʹ੾Γସ͍͑ͯ͘) 20

Slide 21

Slide 21 text

RailsͰDartSassΛѻ͏ํ๏͸ʁ • 3ͭ͋Δ • dartsass-rails gem • css-bundling-rails gem • webpackͷsass-loader 21

Slide 22

Slide 22 text

dartsass-rails • SassͷόΠφϦ͕಺แ͞Ε͓ͯΓɺNodeͳͲͷϥϯλΠϜͳ͠ʹ࣮ ߦՄೳ • assets:precompileͷઌ಄ʹbuild༻RakeTaskΛࠩ͠ࠐΉ 22 → importmap-railsར༻ԼͳͲɺwebpack΍nodeʹґଘ͠ͳ͍؀ڥͰͷར༻Λ૝ఆ https://github.com/rails/dartsass-rails

Slide 23

Slide 23 text

cssbundling-rails • ηοτΞοϓ༻RakeλεΫͰpackage.jsonͷscriptsʹbuild:cssΛɺ npmύοέʔδͷsassΛdependenciesʹ௥Ճ • assets:precompileͷઌ಄ʹ yarn install && yarn build:css Λࠩ͠ࠐΉ 23 https://github.com/rails/cssbundling-rails → npm scriptsΛར༻͢ΔͨΊɺॊೈʹ࣮ߦ಺༰Λ੍ޚՄೳ

Slide 24

Slide 24 text

Webpackͷsass-loader • WebpackʹόϯυϦϯάͤ͞Δํ๏ • ࠓ೔͸࣌ؒͷ౎߹্লུ 24

Slide 25

Slide 25 text

ͲΕΛબ΂͹͍͍ͷ͔ʁ • NodeΛར༻͍ͯ͠ΔϓϩδΣΫτͰ͋Ε͹cssbundling-rails͔Webpack Λ࢖͏ͷ͕ྑ͍ • npmͷsassʹґଘ͢ΔͨΊdependabotͳͲͰͷΞοϓσʔτ͕Մೳ • ϑϩϯτΤϯυίϛϡχςΟͷ৘ใΛద༻Ͱ͖Δ • 2ͭͷͲͪΒΛ࢖͏͔͸Webpackʹґଘͤ͞Δ͔͠ͳ͍͔Ͱݕ౼͢Δ • Dartsass-rails͸ɺsassͷόʔδϣϯΞοϓ͕ߦΘΕ͍ͯͳ͍ͷ͕ؾʹͳΔ 25

Slide 26

Slide 26 text

@import͔Β@use΁ͷॻ͖׵͑ • Sassެ͔ࣜΒఏڙ͞Ε͍ͯΔϚΠάϨʔλʔ͕͋ΔͷͰɺ·ͣͦΕΛ ࢼ͢ͷ͕ྑ͍ • @import͔Β@use΁ͷॻ͖׵͑ɺ֤ఆٛͷར༻ՕॴͰͷ໊લۭؒͷ ෇༩ͳͲ 26 https://sass-lang.com/blog/the-module-system-is-launched#automatic-migration

Slide 27

Slide 27 text

ҠߦϓϩηεͰؾ͍ͮͨ͜ͱ 27

Slide 28

Slide 28 text

sassc-railsͷ᠘ • DartSassʹ੾Γସ͑Δͱɺͦͷ··Ͱ͸@import͕ಈ͔ͳ͍Օॴ͕ଟʑ͋ͬͨ • @import “utilities/**” ͷΑ͏ͳglob → ϑΝΠϧΛͦΕͧΕ໌ࣔ͢Δ • xxx.scss.erb → ͖͋ΒΊ·͠ΐ͏ • admin-lte/dist/css/adminlte → admin-lte/dist/css/adminlte.css • ͜ΕΒ͸sassc-rails͕ॊೈʹॲཧͯ͘͠Ε͍ͯͨ 28 → Ϗϧυʹࣦഊ͢Δ৔߹͸ɺsassc-rails͕ॲཧͯ͘͠Ε͍ͯͳ͍͔ʁΛ֬ೝ

Slide 29

Slide 29 text

QAํ๏ • LibSass͔ΒDartSassʹ੾Γସ͑Δɾ@import͔Β@useʹ੾Γସ͑Δࡍͷ QAͱͯ͠͸࠷ऴతͳग़ྗCSSͷࠩ෼ΛνΣοΫ͢Δͱྑ͍ • Sassʹ͸outputStyleͱ͍͏Φϓγϣϯ͕͋Γɺexpandedʹઃఆ͢Δ͜ͱ ͰՄಡੑ͕ߴ·ΓdiffΛऔΔ͜ͱ͕Ͱ͖Δ • Kibelaͷ৔߹ϕϯμʔϓϨϑΟοΫεͷ࡟আ΍௥Ճɺbackground-image ͷύε͕มΘΔͳͲ͕͋ͬͨ • QAͷൣғΛߜΔ͜ͱ͕Ͱ͖Δ 29

Slide 30

Slide 30 text

ࠓճͷηογϣϯͷ·ͱΊ • @import͸ඇਪ঑Ͱ͋Γ@useʹ੾Γସ͑Δඞཁ͕͋Δɺ@use͸DartSassͰͷ Έར༻Մೳ • 80%ͷϢʔβʔ͕DartSassʹҠߦͨ͠1೥ޙΛ໨ॲʹ@import͸࡟আ͞ΕΔ༧ ఆͰɺݱࡏ75% • RailsͰDartSassΛར༻͢Δखஈ͸1.dartsass-rails, 2.css-bundling-rails, 3.webpack͕͋ΓɺnodeΛར༻͍ͯ͠ΔͳΒ2͔3͕ྑ͍ • Ҡߦ࣌ͷQAํ๏ͱͯ͠outputStyleΛexpandedʹઃఆ͠diffΛऔΔํ๏͕͋Δ 30

Slide 31

Slide 31 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ cssbundling-rails + dartsassͷݕূ࣮૷ΛGitHubʹࡌ͍ͤͯ·͢ https://github.com/MH4GF/css-bundling-rails-dartsass-demo 31