Web制作者のためのSassの参考書.pdf

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 ͕͋Γ·͢ɻ

͝੩ௌ͋Γ͕ͱ͏͍͟͝·͢

Web制作者のためのSassの参考書.pdf

Web制作者のためのSassの参考書.pdf

IMANISHI TOSHIFUMI

More Decks by IMANISHI TOSHIFUMI

Other Decks in Technology

Featured

Transcript

8FC੍࡞ऀͷͨΊͷ4BTTͷࢀߟॻ Sep 18, 2019 / Toshifumi Imanishi

ຊ೔ɺ࿩͢಺༰ w 4BTTͱ͸ w 4BTTͷྺ࢙ w ଞͷ$44ϝλݴޠ w ΋͏গ͠4BTTΛ۷ΓԼ͛ͨ࿩ w

͞·͟·ͳ$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 ͱ͸

͑ɺͳΜͰ%BSUʁ

ઌ೔ɺ৽ϞδϡʔϧγεςϜͷϓϨϏϡʔ൛͕ެ։

৽ϞδϡʔϧγεςϜͱ͸ w !VTFͱ!GPSXBSEͷ௥Ճ w !JNQPSUͷഇࢭʢ౰໘͸૬ޓӡ༻͢ΔͨΊɺαϙʔτ͢Δʣ ࠶ར༻ͷ࠷΋؆୯ͳΞϓϩʔν͸ɺ@import ʹͳΓ·͢ɻ͔͠͠ɺ@import ʹ͸ଟ͘ͷ໰୊͕જ ΜͰ͍·ͨ͠ɻಉҰϑΝΠϧʹෳ਺ͷ @import

HVMQͰ৽ϞδϡʔϧγεςϜΛࢼ͢ const gulp = require('gulp'); const sass = require('gulp-sass'); sass.compiler

!JNQPSU͔Β!VTFͷॻ͖׵͑ ม਺΍NJYJO͸άϩʔόϧͰ͸ͳ͘ͳΓɺݱࡏͷελΠϧγʔτͰͷΈʢϓϥΠϕʔτͱͯ͠ʣ ద༻͞Ε·͢ɻ // main.scss @import “variables"; @import "foundation/base"; //

೚ҙͷ໊લۭؒΛ΋ͨͤΔ !VTFͷσϑΥϧτͷ໊લۭؒ͸ɺΠϯϙʔτͨ͠ϑΝΠϧ໊ʹΑܾͬͯ·Γ·͢ɻ΋ͪΖΜɺ ໊લۭؒΛ໌ࣔతʹઃఆ͢Δ͜ͱ΋ՄೳͰ͢ɻ ʢϫΠϧυΧʔυʣΛ༻͍Ε͹ɺτοϓϨϕϧͷ ໊લۭؒʢ໊લۭؒͳ͠ʣʹͳΓ·͢ɻ // main.scss @import "foundation/base"; //

!GPSXBSE͸ɺଞͷϞδϡʔϧͷม਺ɺNJYJOͳͲΛؚΜͩϞδϡʔϧͱͯ͠ΤΫεϙʔτ͠· ͢ɻύʔγϟϧΛར༻ͯ͠4BTTϑΝΠϧΛ෼ׂ͢Δ؅ཧʹ໾ཱͪ·͢ɻ!GPSXBSEͰΠϯϙʔ τ͞ΕͨϞδϡʔϧʹ͸ɺ໊લۭؒΛؚΈ·ͤΜɻ !GPSXBSEͰ·ͱΊΔ // _base.scss @use "setting" as *;

͝੩ௌ͋Γ͕ͱ͏͍͟͝·͢