#6 ScssとCompass 再入門

Sass/Compass ࠶ೖ໳ 4&,"*&ษڧձ

΄ͳɺ͍͔͜ʙ

ΞδΣϯμ 4BTTͱ͸ 4DTTػೳ঺հ $PNQBTTͱ͸

4BTTͱ͸ 4BTTɿ ʮ4ZOUBDUJDBMMZ"XFTPNF4UZMF4IFFUTʯ $44Λ֦ுͨ͠ϝλݴޠͰ͢ɻ ެࣜαΠτɿIUUQTBTTMBOHDPN

4BTTͱ 4DTTʢ4BTTZ$44ʣͷ ҧ͍͸ ʁʁ ެࣜαΠτɿ  IUUQTBTTMBOHDPNEPDVNFOUBUJPOpMF4"44@3&'&3&/$&IUNMTZOUBY    ߏจͷҧ͍  ɾ4DTT  $44ͷߏจΛ֦ுͨ͠΋ͷ 
֦ுࢠ͸TDTTΛ࢖͍·͢ɻ ɾ4BTT  ݹ͍ߏจͰΠϯσϯτߏจͱͯ͠஌ΒΕ͍ͯΔ΋ͷͰ͢ɻ\^ͳͲ ͸࢖Θͳ͍ɻ  ֦ுࢠ͸TBTTΛ࢖͍·͢ɻ

body  color: #000 TBTT TDTT body {  color: #000;  }
೾ׅހʨʩɺηϛίϩϯʀ ɹɹɹɹɹෆཁɹɹɹɹɹɹɹɹɹɹɹɹඞཁ ɹɹɹɹɹɹɹɹ!NJYJO !JODMVEF ೾ׅހʨʩɺηϛίϩϯʀ

ࠓ೔͸ Ұൠతʹ޿͘࢖ΘΕ͍ͯΔ 4DTTͷػೳΛ ঺հ͠·͢ɻ

HFNVQEBUFTZTUFN  HFNJOTUBMMTBTT  TBTTWɹɹˡ֬ೝ  4BTT 4FMFDUJWF4UFWF

4DTTػೳ঺հ

Variablesม਺ TDTT DTT $font-stack: Helvetica, sans- serif; $primary-color: #333; body
{ font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans- serif; color: #333; }

Variablesม਺ TDTT DTT $font-stack: Helvetica, sans-serif; $primary-color: #333; body {
font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans-serif; color: #333; } ม਺ͷఆٛ ม਺ͷݺͼग़͠

NestingೖΕࢠ TDTT DTT nav { ul { margin: 0; padding:
0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }

NestingೖΕࢠ TDTT DTT nav { ul { margin: 0; padding:
0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } ೖΕࢠ

NestingೖΕࢠ਌ͷࢀর TDTT DTT nav { ul { margin: 0; padding:
0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; &:hover { text-decoration: underline; } } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } nav a:hover {  text-decoration: underline; }

NestingೖΕࢠ਌ͷࢀর TDTT DTT nav { ul { margin: 0; padding:
0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; &:hover { text-decoration: underline; } } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } nav a:hover {  text-decoration: underline; } ਌ͷࢀর

4DTTϑΝΠϧʹΞϯμʔείΞʮ@ʯͰ࢝·ΔϑΝΠϧ໊Λ෇͚Δ͚ͩ  ྫɿɹ@SFTFUTDTT    ϝϯςφϯε͠΍͍͢Α͏ʹɺϞδϡʔϧ୯ҐͳͲͰ࡞੒ͨ͠Γศར    Partialsύʔγϟϧ @SFTFUTDTT @NPEVMTDTT DPNNPOTDTT DPNNPODTT
@MBZPVUTDTT DPNQJMFE

!JNQPSUσΟϨΫςΟϒͰಡΈࠐΈ·͢ɻ  ʮ@ʯ֦ுࢠTDTTͷهड़ೖΓ·ͤΜɻ ImportΠϯϙʔτ TDTT DTT // _reset.scss html, body, ul,
ol { margin: 0; padding: 0; } // base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; } html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

!JNQPSUσΟϨΫςΟϒͰಡΈࠐΈ·͢ɻ  ʮ@ʯ֦ுࢠTDTTͷهड़ೖΓ·ͤΜɻ ImportΠϯϙʔτ TDTT DTT // _reset.scss html, body, ul,
ol { margin: 0; padding: 0; } // base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; } html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; } ੜ੒͞Εͳ͍ CBTFDTT CBTFTDTT

ϛοΫεΠϯͰ͍͔ͭ͘ͷελΠϧఆٛΛάϧʔϐϯά͓͖ͯ͠ݺͼग़͢͜ͱ͕Ͱ͖· ͢ɻ  !NJYJOϛοΫεΠϯ໊ ม਺ \^  ݺͼग़͠ˠɹ!JODMVEFϛοΫεΠϯ໊ QY MixinϛοΫεΠϯ TDTT
DTT @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

ϛοΫεΠϯͰ͍͔ͭ͘ͷελΠϧఆٛΛάϧʔϐϯά͓͖ͯ͠ݺͼग़͢͜ͱ͕Ͱ͖· ͢ɻ  !NJYJOϛοΫεΠϯ໊ ม਺ \^  ݺͼग़͠ˠɹ!JODMVEFϛοΫεΠϯ໊ QY MixinϛοΫεΠϯ TDTT
DTT @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } ελΠϧͷఆٛ ݺͼͩ͠ ม਺΋౉ͤΔ ݺͼग़͠ઌͰల։͞ΕΔ  Ҿ਺΋࢖͑Δ

!FYUFOEΛ࢖͏͜ͱʹΑͬͯDTTϓϩύςΟʔΛଞͷηϨΫλʔͰ ܧঝ͢Δ͜ͱ͕Ͱ͖·͢ɻ Extend/Inheritanceܧঝ TDTT DTT .message { border: 1px solid
#ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }

!FYUFOEΛ࢖͏͜ͱʹΑͬͯDTTϓϩύςΟʔΛଞͷηϨΫλʔͰ ܧঝ͢Δ͜ͱ͕Ͱ͖·͢ɻ Extend/Inheritanceܧঝ TDTT DTT .message { border: 1px solid
#ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } ελΠϧͷఆٛ ܧঝݩʹηϨΫλ͕௥Ճ͞ΕΔ

!FYUFOEΛ࢖͏͜ͱʹΑͬͯDTTϓϩύςΟʔΛଞͷηϨΫλʔͰ ܧঝ͢Δ͜ͱ͕Ͱ͖·͢ɻ Extend/InheritanceܧঝϓϨʔεϗϧμʔ TDTT DTT %message { border: 1px solid
#ccc; padding: 10px; color: #333; } .success { @extend %message; border-color: green; } .error { @extend %message; border-color: red; } .warning { @extend %message; border-color: yellow; } .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }

!FYUFOEΛ࢖͏͜ͱʹΑͬͯDTTϓϩύςΟʔΛଞͷηϨΫλʔͰ ܧঝ͢Δ͜ͱ͕Ͱ͖·͢ɻ Extend/InheritanceܧঝϓϨʔεϗϧμʔ TDTT DTT %message { border: 1px solid
#ccc; padding: 10px; color: #333; } .success { @extend %message; border-color: green; } .error { @extend %message; border-color: red; } .warning { @extend %message; border-color: yellow; } .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } ελΠϧͷఆٛ DTTʹ͸ग़ྗ͞Εͳ͍

BOE͕࢖͑·͢ɻ Operatorsԋࢉࢠ TDTT DTT .container { width:
100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; } .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; }

!JG !GPS !FBDIBOE!XIJMFͳͲ΋࢖͑·͢ɻ Otherͦͷଞ

$PNQBTTͱ͸

$PNQBTT JT BOPQFOTPVSDF $44"VUIPSJOH'SBNFXPSL

$PNQBTT JT BOPQFOTPVSDF $44"VUIPSJOH'SBNFXPSL ΦʔϓϯιʔεͷϑϨʔϜϫʔΫͰ͢ɻ  4DTT͕ΑΓศརʹ࢖͍΍͘͢ͳΓ·͢ɻ

gem update --system  gem install compass

DPNQBTTDSFBUFϓϩδΣΫτ໊

DPOHJHSC  TBTT  TUZMFTIFFUT # Require any additional compass plugins here.
# Set this to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" cache = false # You can select your preferred output style here (can be

# Require any additional compass plugins here. # Set this
to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" cache = false # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed output_style = :expanded # To enable relative paths to assets via compass helper functions. output_style = :expanded or :nested or :compact or :compressed expanded nested compact compressed

# Require any additional compass plugins here. # Set this
to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" cache = false # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed output_style = :expanded # To enable relative paths to assets via compass helper functions. line_comments = false or true line_comments = true

compass watch ߋ৽

compass watch

compass watch ࠓճ͸ίϯύΠϧ͢Δͷ͸DPNQBTTͰ͕ͨ͠ HSVOUTQSJUFTNJUI  HSVOUBVUPQSFpYFS HSVOUDPOUSJCJNBHFNJO HSVOUDPOUSJCNJODTT HVMQTQSJUFTNJUI HVMQBVUPQSFpYFS HVMQJNBHFNJO
HVMQNJOJGZDTT

IUUQDPNQBTTTUZMFPSHSFGFSFODFDPNQBTT $PNQBTT࢖͏ཧ༝͕͋Μ·Γͳ͍Ͱ͕͢

@import “compass"; @import “compass/css3" @import “compass/layout" @import "compass/reset"

.box-sizing-example { background: red; padding: 20px; border: 10px solid green;
margin: 20px; width: 200px; } DPOUFOUCPY\ !JODMVEFCPYTJ[JOH DPOUFOUCPY ^ CPSEFSCPY\ !JODMVEFCPYTJ[JOH CPSEFSCPY ^ TDTT

.box-sizing-example { background: red; padding: 20px; border: 10px solid green;
margin: 20px; width: 200px; } #content-box { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } #border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } compiled DTT

࣌୅ͷྲྀΕ͸ૣ͍ʔ  ͔࣍Β࣍ͱग़ͯ͘Δʂ PostCSS  https://github.com/postcss     libSass  http://sass-lang.com/libsass

˒˒˒Happy Styling!˒˒˒

ࢀߟ IUUQDPNQBTTTUZMFPSH IUUQTBTTMBOHDPN IUUQCPVSCPOJP .JYJO-JCSBSZ

#6 ScssとCompass 再入門

#6 ScssとCompass 再入門

More Decks by sekaie

Featured

Transcript