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
860
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
170
Form_design_from_Netflix.pdf
toshifumiimanishi
0
140
JAMstack_kotohajime.pdf
toshifumiimanishi
0
97
mercurial_nyuumon.pdf
toshifumiimanishi
0
73
Web制作者のためのSassの参考書.pdf
toshifumiimanishi
3
2.8k
ゆく技術_くる技術.pdf
toshifumiimanishi
0
270
裏CSS.pdf
toshifumiimanishi
0
110
Other Decks in Technology
See All in Technology
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
360
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
280
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
1
200
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
220
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.6k
Vault を基盤として整備し、 みんなに使ってもらえるようになるまで
takahiko
1
120
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
430
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
330
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
9
2.9k
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
190
Agile PBL at New Grads Trainings
kawaguti
PRO
1
380
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Designing for humans not robots
tammielis
253
25k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Raft: Consensus for Rubyists
vanstee
140
7.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing for Performance
lara
610
69k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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དྷʹඇਪɺ࠶དྷʹશഇࢭ
גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔͰɺ ΤϯδχΞɺσβΠφʔΛืू͓ͯ͠Γ·͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠