Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
New_Sass_Module_System.pdf
Search
IMANISHI TOSHIFUMI
January 15, 2020
Technology
2
870
New_Sass_Module_System.pdf
IMANISHI TOSHIFUMI
January 15, 2020
Tweet
Share
More Decks by IMANISHI TOSHIFUMI
See All by IMANISHI TOSHIFUMI
Vue 3 超入門 ー ゆく Vue くる Vue
toshifumiimanishi
0
180
Form_design_from_Netflix.pdf
toshifumiimanishi
0
140
JAMstack_kotohajime.pdf
toshifumiimanishi
0
99
mercurial_nyuumon.pdf
toshifumiimanishi
0
74
Web制作者のためのSassの参考書.pdf
toshifumiimanishi
3
2.8k
ゆく技術_くる技術.pdf
toshifumiimanishi
0
270
裏CSS.pdf
toshifumiimanishi
0
120
Other Decks in Technology
See All in Technology
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
440
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
3.9k
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
640
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
360
o11yで育てる、強い内製開発組織
_awache
3
130
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
300
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
350
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
190
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
470
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
120
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Optimizing for Happiness
mojombo
379
70k
Faster Mobile Websites
deanohume
310
31k
The Invisible Side of Design
smashingmag
301
51k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
It's Worth the Effort
3n
187
28k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Automating Front-end Workflow
addyosmani
1371
200k
Transcript
γϯɾ4BTT.PEVMF4ZTUFN .BSLVQ.FFUVQʛ+BO ࠓढ़จ גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔ
ࠓढ़จ ͍·ʹ͠ ϑϩϯτΤϯυΤϯδχΞ !UPTIJNBSOJF UPTIJGVNJJNBOJTIJ ͱ͠;Έ
%BSU4BTTͰ৽͍͠ϞδϡʔϧγεςϜ͕ ϦϦʔε͞Ε·ͨ͠
!VTFͱ!GPSXBSEͷՃ !JNQPSUͷഇࢭʢ໘૬ޓӡ༻͢ΔͨΊɺαϙʔτ͢Δʣ ࠶ར༻ͷ࠷؆୯ͳΞϓϩʔνɺ@import ʹͳΓ·͢ɻ͔͠͠ɺ@import ʹଟ͘ͷ͕જ ΜͰ͍·ͨ͠ɻಉҰϑΝΠϧʹෳͷ @import ΛಡΈࠐΉ͜ͱͰίϯύΠϧ͕Լ͢Δɺϥ ΠϒϥϦͷ։ൃऀ໊લۭؒΛඞཁͱ͢ΔɺΧϓηϧԽ͕ͳ͍ɺಛఆͷม mixin
ͷࢀরݩ͕ ࠔɺCSS ͷ @import ͱฆΒΘ͍͠ͳͲ͕͋Γ·͢ɻ → ৽͍͠ϞδϡʔϧγεςϜ͜ΕΒͷΛରॲ͠ɺݱࡏͷϓϩάϥϛϯάݴޠͰ࣮ূ͞Εͯ ͍ΔϕετϓϥΫςΟεʹ߹ΘͤΔ͜ͱΛඪͱ͍ͯ͠·͢ɻ ৽͍͠ϞδϡʔϧγεςϜͱ
HVMQͰ৽͍͠ϞδϡʔϧγεςϜΛࢼ͢ $ npm install sass save-dev
HVMQͰ৽͍͠ϞδϡʔϧγεςϜΛࢼ͢ HVMQpMFKT const gulp = require('gulp'); const sass = require('gulp-sass');
sass.compiler = require('sass'); ͜ͷ 1 ߦΛՃ͢Δ
w มNJYJOάϩʔόϧͰͳ͘ͳΓɺݱࡏͷελΠϧγʔτͰͷΈʢϓϥΠϕʔτͱ͠ ͯʣద༻͞Ε·͢ɻ w !VTFͷσϑΥϧτͷ໊લۭؒɺΠϯϙʔτͨ͠ϑΝΠϧ໊ʹج͍ͮͯੜ͠·͢ɻ໊લۭ ؒΛ໌ࣔతʹઃఆ͢Δ͜ͱՄೳͰ͢ɻ ʢϫΠϧυΧʔυʣΛ༻͍ΕɺτοϓϨϕϧͷ໊લ ۭؒʢ໊લۭؒͳ͠ʣʹͳΓ·͢ɻ !VTFͷಛ
!VTFͷಛʛσΟϨΫτϦߏ 4$44 @WBSJBCMFTTDTT @CBTFTDTT GPVOEBUJPO 4$44 4$44 NBJOTDTT มΛཧ͢ΔϑΝΠϧ ϝΠϯͷελΠϧ
ϓϩδΣΫτʹ͓͚ΔجຊతͳελΠϧ
!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"; ৽͍͠ॻ͖ํ ໊લۭؒΠϯϙʔτͨ͠ϑΝΠϧ໊ʹج͍ͮͯੜ
!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"; ৽͍͠ॻ͖ํ ໊લۭؒͷࢦఆ
!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ͷ··
!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Ͱ࢝·Δ߹ɺϓϥΠϕʔτมѻ͍ʹͳΔ ΞΫηεՄ
!GPSXBSEɺมɺNJYJOͳͲͷϞδϡʔϧΛؚΜͩ"1*ͱͯ͠ΤΫεϙʔτ͠·͢ɻ!VTF ͱҟͳΓɺ!GPSXBSEΛએݴ͍ͯ͠ΔϑΝΠϧͰͦͷϞδϡʔϧΛࢀরͰ͖·ͤΜɻύʔ γϟϧΛར༻ͯ͠4BTTϑΝΠϧΛׂ͢ΔཧʢFHϥΠϒϥϦ։ൃʣʹཱͪ·͢ɻ !GPSXBSEͷಛ
!GPSXBSEͷಛʛσΟϨΫτϦߏ 4$44 NBJOTDTT ϝΠϯͷελΠϧ 4$44 @GVODUJPOTTDTT @CSFBLQPJOUTTDTT NJYJOT 4$44 ϒϨʔΫϙΠϯτͷNJYJOΛཧ͢ΔϑΝΠϧ
4$44 @BQJTDTT ϞδϡʔϧΛΤΫεϙʔτ͢Δ"1*ϑΝΠϧ ؔΛཧ͢ΔϑΝΠϧ 4$44 @WBSJBCMFTTDTT มΛཧ͢ΔϑΝΠϧ
!GPSXBSEͷಛ @WBSJBCMFTTDTT $breakpoints: ( sm: 0, md: 768px, lg: 1280px
) !default; $font-size-sm: 1rem !default; ֤ϒϨʔΫϙΠϯτͷઃఆ
!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ͷศརؔ
!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; } } ؔͷಡΈࠐΈ
!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*ͷΠϯϙʔτ
4BTTʹศརͳػೳΛؚΉଟ͘ͷΈࠐΈϞδϡʔϧ͕͋Γ·͢ɻ͜ΕΒͷϞδϡʔϧ !VTFͰΠϯϙʔτ͠·͢ɻͯ͢ͷΈࠐΈϞδϡʔϧTBTTܦ༝ͰΠϯϙʔτ͠·͢ɻै དྷͷάϩʔόϧͷར༻ඇਪʹͳΓ·͢ɻ࠷ऴతʹഇࢭʹͳΓ·͕͢ɺݱࡏݹ͍4BTT όʔδϣϯɺ͓Αͼɺ-JC4BTTͷޓੑͷͨΊར༻ՄೳͰ͢ɻ ΈࠐΈϞδϡʔϧ
ΈࠐΈϞδϡʔϧ wTBTTNBUI wTBTTTUSJOH wTBTTDPMPS wTBTTMJTU wTBTTNBQ wTBTTTFMFDUPS wTBTTNFUB
ΈࠐΈϞδϡʔϧʛTBTTNFUB NBJOTDTT @use "sass:meta"; :root { @if $mode == "development"
{ @include meta.load-css("_partials/test"); } } NFUBMPBEDTT ɺ৽͍͠ΈࠐΈNJYJOTʹͳΓ·͢ɻ ͪͳΈʹ!JNQPSUͰΤϥʔʹͳΓ·͢ɻ
ࣗಈҠߦ $ npx sass-migrator module migrate-deps < lepath>
%BSU4BTTͱ-JC4BTTͷ྆ݴޠ͕ϞδϡʔϧγεςϜΛαϙʔτͨ͠ޙɺ·ͨɺ %BSU4BTT͕ϞδϡʔϧγεςϜͷαϙʔτΛ։͔࢝ͯ͠Βޙͷ͍ͣΕ͔ૣ͍ظݶʢ ͘ͱ݄ʣʹඇਪʹͳΔ༧ఆ ඇਪ͔Βޙʢ͘ͱ݄ʣαϙʔτΛऴྃ༧ఆ !JNQPSUͷશഇࢭ͍ͭʁ
ॴײ w ϑΝΠϧͷґଘ͕ؔ໌֬ʹͳΔ w ໊લۭؒɺ$44ؔɺ4BTTؔɺಠࣗؔͷΈ͚͕Ͱ͖Δ w ϓϥΠϕʔτมʹΑΔΧϓηϧԽ͕Ͱ͖Δ w ΤίγεςϜաظ
·ͱΊ w ৽͍͠ϞδϡʔϧγεςϜ%BSU4BTTͷ࠷৽൛Ͱར༻Մೳ w !VTFಡΈࠐΈݩͷελΠϧγʔτͷΈͰ༗ޮ w ΈࠐΈϞδϡʔϧ!VTFܦ༝ͰΠϯϙʔτ͢Δ w .JHSBUPSͰࣗಈҠߦͰ͖Δ w
!JNQPSUདྷʹඇਪɺ࠶དྷʹશഇࢭ
גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔͰɺ ΤϯδχΞɺσβΠφʔΛืू͓ͯ͠Γ·͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠