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
100
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
Wasmのエコシステムを使った ツール作成方法
askua
0
140
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
290
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
140
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
130
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
190
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
200
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
160
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
240
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
280
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The Language of Interfaces
destraynor
162
25k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
RailsConf 2023
tenderlove
30
1.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Bash Introduction
62gerente
615
210k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
A better future with KSS
kneath
239
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
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དྷʹඇਪɺ࠶དྷʹશഇࢭ
גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔͰɺ ΤϯδχΞɺσβΠφʔΛืू͓ͯ͠Γ·͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠