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
740
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
140
Form_design_from_Netflix.pdf
toshifumiimanishi
0
92
JAMstack_kotohajime.pdf
toshifumiimanishi
0
59
mercurial_nyuumon.pdf
toshifumiimanishi
0
45
Web制作者のためのSassの参考書.pdf
toshifumiimanishi
3
2.6k
ゆく技術_くる技術.pdf
toshifumiimanishi
0
230
裏CSS.pdf
toshifumiimanishi
0
73
Other Decks in Technology
See All in Technology
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
130
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
4
310
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.6k
Terraformあれやこれ/terraform-this-and-that
emiki
8
650
The CloudCompare project by Dr. Daniel Girardeau-Montaut
kentaitakura
0
510
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
8
1.9k
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
230
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
190
0→1開発における技術選定において一番大切なこと
bicstone
1
330
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.6k
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
750
シン・Kafka / shin-kafka
oracle4engineer
PRO
8
2.7k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Code Reviewing Like a Champion
maltzj
513
39k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
Atom: Resistance is Futile
akmur
258
25k
Clear Off the Table
cherdarchuk
83
310k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Producing Creativity
orderedlist
PRO
336
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
In The Pink: A Labor of Love
frogandcode
138
21k
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དྷʹඇਪɺ࠶དྷʹશഇࢭ
גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔͰɺ ΤϯδχΞɺσβΠφʔΛืू͓ͯ͠Γ·͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠