Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Web制作者のためのSassの参考書.pdf
IMANISHI TOSHIFUMI
September 18, 2019
Technology
3
2.1k
Web制作者のためのSassの参考書.pdf
IMANISHI TOSHIFUMI
September 18, 2019
Tweet
Share
More Decks by IMANISHI TOSHIFUMI
See All by IMANISHI TOSHIFUMI
toshifumiimanishi
0
23
toshifumiimanishi
0
39
toshifumiimanishi
2
460
toshifumiimanishi
0
25
toshifumiimanishi
0
25
toshifumiimanishi
0
170
toshifumiimanishi
0
35
Other Decks in Technology
See All in Technology
nkjzm
1
870
shoken
0
200
k1low
2
1.2k
hgsgtk
5
1.5k
miura55
0
120
ymas0315
0
180
clustervr
0
110
hhiroshell
9
540
hirosys
0
150
ocise
0
210
asamihirai
0
210
shimacos
2
370
Featured
See All Featured
keavy
106
14k
sstephenson
144
12k
frogandcode
127
20k
lara
172
9.5k
erikaheidi
13
4.2k
jakevdp
775
200k
cromwellryan
101
5.9k
skipperchong
7
670
dougneiner
55
5.4k
afnizarnur
176
14k
hannesfritz
27
930
cassininazir
347
20k
Transcript
8FC੍࡞ऀͷͨΊͷ4BTTͷࢀߟॻ Sep 18, 2019 / Toshifumi Imanishi
ຊɺ͢༰ w 4BTTͱ w 4BTTͷྺ࢙ w ଞͷ$44ϝλݴޠ w ͏গ͠4BTTΛ۷ΓԼ͛ͨ w
৽ϞδϡʔϧγεςϜ ඇΤϯδχΞ͚ ΤϯδχΞ͚
4BTTͱʁ 4BTTʢ4ZOUBDUJDBMMZ"XTPNF4UZMFTIFFUTʣͱɺ$44Λ֦ுͨ͠ݴޠͰ͢ɻ$44͘ී ٴͤ͞Δత͋ͬͯॻࣜࣗମγϯϓϧͳͷͰ͕͢ɺϓϩάϥϜͰͨΓલͷΑ͏ʹඋ͑ͯ ͍Δػೳ͕͋Γ·ͤΜɻͦͷΑ͏ͳ$44ͷऑΛิ͏తͰੜͨ͠ͷ͕4BTTʹͳΓ·͢ɻ 4BTTͷެࣜαΠτʢ݄ݱࡏʣIUUQTTBTTMBOHDPN
4BTTͳͥੜͨ͠ͷ͔ʁ ࡢࠓͷ8FCαΠτ੍࡞ʹɺϚϧνσόΠεͷରԠɺ3FUJOBσΟεϓϨΠͳͲͷߴղ૾ σΟεϓϨΠͷରԠɺϨεϙϯγϒ8FCσβΠϯͳͲɺ$44ʹٻΊΒΕΔཁ͕݅ଟ༷Խ͠ ͍ͯ·͢ɻ͔͠͠ɺ։ൃऀʹٻΊΒΕΔػೳ͕$44ͷ༷ʹՃ͞ΕΔʹ૬ͳ݄͕͔͔ Γ·͢ɻ ˠͦ͜ͰɺϝλݴޠʹͲΜͲΜػೳΛՃ͠ɺϩʔΧϧڥͰಈ࡞͢ΔϓϩάϥϜʹΑΓɺ $44ͷ༷ʹม͢ΕΑ͍ͱ͍͏ߟ͕͑ੜ·Ε·ͨ͠ɻͦΕ͕4BTTͷੜʹͳΓ·͢ɻ
4BTTɺTDTTͱ͍͏֦ுࢠͷϑΝΠϧͰهड़͢Δͷ͕σϑΝΫτελϯμʔυʹͳΓ·͢ɻ ͪΖΜɺTBTTͱ͍͏֦ுࢠͷϑΝΠϧ͋Γ·͢ɻʢެ։ॳɺ4"44ه๏ͷΈʣ྆ऀʹ ه๏ͷҧ͍͕͋Γɺ4$44ه๏͕$44ͱಉ͡ه๏Λ࠾༻ɺΏ͑ʹ$44ʹޓੑ͕͋Γ·͢ɻ 4$44ه๏ͷੜ͕ɺ4BTTʹΛूΊ·ͨ͠ɻ 4BTT͚ͩͲ4$44ϑΝΠϧ body { font-size: 1.6rem; word-wrap:
break-word; } SCSS ه๏ body font-size: 1.6rem word-wrap: break-word SASS ه๏ 2006 ʹ Sass ެ։ Sass 3.0
͞·͟·ͳ$44ϝλݴޠ w -&44ɿ+BWB4DSJQUɺաڈʹ#PPUTUSBQͰ࠾༻͞Ε͍ͯͨ w 4UZMVTɿ4BTT-&44ΑΓޙൃͷϝλݴޠɺ4"44ه๏ʹ͍ۙ ͱ͍͑ɺ4BTT͕$44ϝλݴޠͷσϑΝΫτελϯμʔυʹͳΓ·͢ɻݱࡏͰ #PPUTUSBQͰ࠾༻͞Ε͍ͯ·͢ɻ
͔͜͜Βɺ͏গ͠۷ΓԼ͛ͨ ʢΤϯδχΞ͚ʣ!
͞·͟·ͳ4BTT w 3VCZ4BTTɿ࠷ॳͷ4BTTɺ݄ʹαϙʔτऴྃ w -JC4BTTɿ͞·͟·ͳݴޠͰ4BTTΛѻ͏ͨΊͷϥΠϒϥϦ w %BSU4BTTɿ%BSUݴޠͰॻ͔Εͨ4BTTɺઌߦͯ͠ػೳ͕࣮͞ΕΔ ※1 Dart ͱ
Google ʹΑͬͯ։ൃ͞Εͨϓϩάϥϛϯάݴޠ ※1
͑ɺͳΜͰ%BSUʁ
%BSUͷٕज़બఆͷཧ༝ ͞·͟·ͳݴޠ͔Β%BSU͕બΕͨཧ༝ΛҎԼʹࣔ͠·͢ɻ w ಈ࡞͕͍ʢ3VCZ4BTTΑΓߴʣ w +BWB4DSJQUʹޓੑ͕͋ΔʢίϯύΠϧͰ͖Δʣ ಛʹ/PEF4BTT"1*ͱͷޓੑʹযΛҠͨ͜͠ͱ͕ཧ༝ʹͳΓ·͢ɻ ͦͯ͠ɺ%BSU4BTTͷొʹΑΓ3VCZ4BTTͷαϙʔτऴྃʹഥं͕͔͔Γ·ͨ͠ɻ
ઌɺ৽ϞδϡʔϧγεςϜͷϓϨϏϡʔ൛͕ެ։
৽ϞδϡʔϧγεςϜͱ w !VTFͱ!GPSXBSEͷՃ w !JNQPSUͷഇࢭʢ໘૬ޓӡ༻͢ΔͨΊɺαϙʔτ͢Δʣ ࠶ར༻ͷ࠷؆୯ͳΞϓϩʔνɺ@import ʹͳΓ·͢ɻ͔͠͠ɺ@import ʹଟ͘ͷ͕જ ΜͰ͍·ͨ͠ɻಉҰϑΝΠϧʹෳͷ @import
ΛಡΈࠐΉ͜ͱͰίϯύΠϧ͕Լ͢Δɺϥ ΠϒϥϦͷ։ൃऀ໊લۭؒΛඞཁͱ͢ΔɺΧϓηϧԽ͕ͳ͍ɺಛఆͷม mixin ͷࢀরݩ͕ ࠔͳͲ͕͋Γ·͢ɻ → ৽͍͠ϞδϡʔϧγεςϜ͜ΕΒͷΛରॲ͠ɺݱࡏͷϓϩάϥϛϯάݴޠͰ࣮ূ͞Εͯ ͍ΔϕετϓϥΫςΟεʹ߹ΘͤΔ͜ͱΛඪͱ͍ͯ͠·͢ɻ
HVMQͰ৽ϞδϡʔϧγεςϜΛࢼ͢ const gulp = require('gulp'); const sass = require('gulp-sass'); sass.compiler
= require('sass'); ͜ͷ 1 ߦΛՃ͢Δ $ npm install -g sass@1.23.0-module.beta.1 ԼهίϚϯυϥΠϯΛ࣮ߦ͢Δ ʢ%BSU4BTTͷϚΠφʔόʔδϣϯʹͳΓ·͢ʣ %BSU4BTTܦ༝ͰίϯύΠϧ͢ΔΑ͏ʹHVMQpMFKTΛઃఆ͢Δ ʢσϑΥϧτͰ/PEF4BTTܦ༝ͰίϯύΠϧ͞Ε·͢ʣ
!JNQPSU͔Β!VTFͷॻ͖͑ มNJYJOάϩʔόϧͰͳ͘ͳΓɺݱࡏͷελΠϧγʔτͰͷΈʢϓϥΠϕʔτͱͯ͠ʣ ద༻͞Ε·͢ɻ // main.scss @import “variables"; @import "foundation/base"; //
_foundation/base.scss html { font-size: $font-size-sm; } // _variables.scss $font-size-sm: 1rem !default; // main.scss @use "foundation/base"; // _foundation/base.scss @use "variables"; html { font-size: variables.$font-size-sm; } // _variables.scss $font-size-sm: 1rem !default;
ҙͷ໊લۭؒΛͨͤΔ !VTFͷσϑΥϧτͷ໊લۭؒɺΠϯϙʔτͨ͠ϑΝΠϧ໊ʹΑܾͬͯ·Γ·͢ɻͪΖΜɺ ໊લۭؒΛ໌ࣔతʹઃఆ͢Δ͜ͱՄೳͰ͢ɻ ʢϫΠϧυΧʔυʣΛ༻͍ΕɺτοϓϨϕϧͷ ໊લۭؒʢ໊લۭؒͳ͠ʣʹͳΓ·͢ɻ // main.scss @import "foundation/base"; //
_foundation/base.scss @use “variables"; html { font-size: variables.$font-size-sm; } // _variables.scss $font-size-sm: 1rem !default; // main.scss @use "foundation/base"; // _foundation/base.scss @use "variables" as var; html { font-size: var.$font-size-sm; } // _variables.scss $font-size-sm: 1rem !default;
!GPSXBSEɺଞͷϞδϡʔϧͷมɺNJYJOͳͲΛؚΜͩϞδϡʔϧͱͯ͠ΤΫεϙʔτ͠· ͢ɻύʔγϟϧΛར༻ͯ͠4BTTϑΝΠϧΛׂ͢Δཧʹཱͪ·͢ɻ!GPSXBSEͰΠϯϙʔ τ͞ΕͨϞδϡʔϧʹɺ໊લۭؒΛؚΈ·ͤΜɻ !GPSXBSEͰ·ͱΊΔ // _base.scss @use "setting" as *;
html { font-size: $font-size-sm; @include breakpoint-up(md) { font-size: $font-size-md; } } // _setting.scss @forward “variables”; @forward “mixins/breakpoints"; // _base.scss @use “variables"; @use “mixins/breakpoints"; html { font-size: variables.$font-size-sm; @include breakpoints.breakpoint-up(md) { font-size: variables.$font-size-md; } }
ࢼͯ͠ΈͯΘ͔ͬͨ͜ͱɺॴײ ৽ͨͳϞδϡʔϧγεςϜɺมNJYJOͳͲΛάϩʔόϧʹࢀর͢Δ͜ͱͰ͖·ͤΜɻ͜ Εɺඪʢ)JHI-FWFMʣʹ͋Δہॴੑʹ֘͠·͢ɻ৽ͨͳϞδϡʔϧγεςϜɺͦͷ 4BTTϑΝΠϧͷΈͰཧղͰ͖ΔΑ͏ʹ͖͢Ͱ͢ɻ·ͨɺ։ൃऀଞͷϑΝΠϧͷ໊લͷিಥ Λؾʹ͢Δ͜ͱͳ͘։ൃͰ͖ΔΑ͏ʹͳΓ·͢ɻ !JNQPSU͕ഇࢭ͞ΕΔʢ໘αϙʔτʣ͜ͱɺݱࡏͷ4BTTͷΤίγεςϜʹେ͖͘Өڹ Λٴ΅͢Ͱ͠ΐ͏ɻ͔͠͠ɺ৽ͨͳϞδϡʔϧγεςϜɺ͜Ε͔Βͷ։ൃʹେ͖͘د༩͢ΔͰ ͠ΐ͏ɻ ※1 ※1ϞδϡʔϧγεςϜͷඪʹɺHigh-Level
ͱLow-Level ͕͋Γ·͢ɻ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·͢