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
850
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
130
JAMstack_kotohajime.pdf
toshifumiimanishi
0
89
mercurial_nyuumon.pdf
toshifumiimanishi
0
67
Web制作者のためのSassの参考書.pdf
toshifumiimanishi
3
2.8k
ゆく技術_くる技術.pdf
toshifumiimanishi
0
260
裏CSS.pdf
toshifumiimanishi
0
110
Other Decks in Technology
See All in Technology
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.1k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
170
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
110
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
8.3k
What’s new in Android development tools
yanzm
0
220
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
180
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
19k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.6k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
18
6.5k
Operating Operator
shhnjk
1
510
OPENLOGI Company Profile for engineer
hr01
1
34k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Code Review Best Practice
trishagee
69
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Language of Interfaces
destraynor
158
25k
Docker and Python
trallard
44
3.5k
Agile that works and the tools we love
rasmusluckow
329
21k
The World Runs on Bad Software
bkeepers
PRO
69
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Thoughts on Productivity
jonyablonski
69
4.7k
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དྷʹඇਪɺ࠶དྷʹશഇࢭ
גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔͰɺ ΤϯδχΞɺσβΠφʔΛืू͓ͯ͠Γ·͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠