THE HAM MEDIA BLOG

CSS Preprocessor Advent Calendar 2012‚Ì14“ú–Ú‚Ì‹LŽ–‚Å‚·B

Sass‚ðŽ©•ª‚ÌŠÖ‚í‚é‚¢‚ë‚¢‚ë‚Ȉȏ‚ÅŽæ‚è“ü‚êŽn‚߂Đ”ƒ–ŒŽ‚½‚¿‚Ü‚µ‚½B‚½‚¾–¢‚¾‚É‚¤‚Ü‚­‚¢‚©‚È‚¢‚Æ‚±‚ë‚à‚ ‚è‚‚A“úXŽg‚¢•û‚ð–͍õ‚µ‚‚\¬‚ð‚©‚ñ‚ª‚¦‚Ä‚â‚Á‚Ä‚¢‚éó‹µ‚Å‚·B\¬‚ÌŠî–{‚́ACSS Preprocessor Advent Calendar 2012‚Ì10“ú–Ú‚É@Takazudo‚³‚ñ‚ª‘‚¢‚Ä‚¢‚é‚悤‚ɁAOOCSS‚ð”O“ª‚É‚¨‚«‚‚\¬‚µ‚悤‚ÆŽæ‚è‘g‚ñ‚Å‚¢‚Ü‚·B

‚³‚č¡‰ñ‚ÍŽg‚Á‚Ä‚¢‚é“à—e‚ ‚ꂱ‚ê‚Æ‚©‚àl‚¦‚Ü‚µ‚½‚ªAŠÈ’P‚ÉŠî–{“I‚È‚Æ‚±‚ë‚ðBƒRƒ}ƒ“ƒh’@‚¢‚ăRƒ“ƒpƒCƒ‹‚Ì‚Æ‚±‚ë‚ð‘‚¢‚Ä‚¢‚±‚¤‚ÆŽv‚¢‚Ü‚·B

Sass‚̍\‘¢–͍õ’†

¡“ú‚Ì–{‘è‚É“ü‚é‘O‚É—]’k‚©‚çB

ˆêl‚âOOCSS‚ð—‰ð‚·‚él‚ŃvƒƒWƒFƒNƒg‚ði‚ß‚éê‡‚ÍOOCSS‚ō\¬‚µ‚Ä‚¢‚­‚Ì‚Í–â‘è‚È‚¢‚Ì‚Å‚·‚ªACSS‚ª‹êŽè‚Ȑl‚Æ•¡”‚ª“¯Žž‚ɐi‚ß‚é‚悤‚ȃvƒƒWƒFƒNƒg‚̏ꍇ‚́i‚»‚ñ‚ȏꍇ‚Á‚ď­‚È‚¢‚©‚à‚µ‚ê‚È‚¢‚Å‚·‚ªAŒ»Ý‚ÌŽ„‚ÍCSS‚ª•s“¾Žè‚¾‚¯‚ÆHTML‚ð‘‚­l‚Æ‚¢‚¤ƒvƒƒOƒ‰ƒ}‚³‚ñ‚ª4`6–¼‚¢‚é‚È‚©‚Ői‚ß‚Ä‚¢‚Ü‚·jA•K—v‚Èclass‚ª•¡”‚ ‚é‚Æ‚È‚é‚Æclass‚ª‘z’èˆÈã‚É‚Í‚¢‚Á‚Ä‚¢‚½‚èA‘z’èˆÈŠO‚ÌŽg‚í‚ê•û‚ð‚µ‚Ä‚µ‚Ü‚¤‚½‚߁A‚È‚©‚È‚©‚¤‚Ü‚­Žæ‚è“ü‚ê‚ç‚ê‚È‚©‚Á‚½‚肵‚Ü‚·B

CSS‚ª‹êŽè‚Ȑl‚ɁAu‚±‚̃Xƒ^ƒCƒ‹\¬‚Ői‚ß‚Ä‚­‚¾‚³‚¢v‚Æ‚µ‚Ä“`‚¦‚邽‚߂ɁA@hiloki‚³‚ñ‚ª7“ú–Ú‚Ì‹LŽ–‚ŏ‘‚¢‚Ä‚¢‚éuCSSƒvƒŠƒvƒƒZƒbƒT‚ŃXƒ^ƒCƒ‹ƒKƒCƒhv‚悤‚ȃXƒ^ƒCƒ‹ƒKƒCƒh‚ð‘‚«‚¾‚µ‚Ä‚¢‚­‚悤‚ȃc[ƒ‹‚Í•K{‚É‚È‚è‚»‚¤‚Å‚·B

‚³‚āA–͍õ‚µ‚Ä‚¢‚邤‚ñ‚Ê‚ñ‚̘b‚Í‚¨‚¢‚Æ‚¢‚āA¡“ú‚Ì“à—eBƒRƒ}ƒ“ƒh‚Å‚â‚Á‚Ă݂悤‚Æ‚©‚»‚¤‚¢‚¤˜b‚ðŠÈ’P‚ɁB

‘‚¢‚½Sass‚̃R[ƒh‚Í‚»‚̂܂܂ł̓uƒ‰ƒEƒU‚Å‚Í•\Ž¦‚Å‚«‚È‚¢‚Ì‚Å‚·‚ªƒRƒ“ƒpƒCƒ‹‚·‚邱‚Æ‚ÅCSS‚Æ‚µ‚Ä‹@”\‚µ‚Ü‚·BSassƒR[ƒh‚ðƒRƒ“ƒpƒCƒ‹‚·‚邽‚߂ɂ́A¼”¨‚³‚ñ‚ª12“ú–ڂɁuCodeKit‚ÅŠÈ’P‚ÉCSS Preprocessor‚ð—˜—p‚·‚éIv‚ŏ‘‚¢‚Ä‚¢‚é‚悤‚ɁACodeKit‚ðŽg‚¤•û‚ªŠy‚©‚à‚µ‚ê‚È‚¢‚Å‚·‚ªAŽ©•ª‚͍ŏ‰‚Ƀ^[ƒ~ƒiƒ‹‚ÅSass‚Ì•Û‘¶‚ðŠÄŽ‹‚µ‚ÄŽg‚¤‚悤‚É‚µ‚Ä‚¢‚Ü‚·B

ƒfƒUƒCƒi[‚É‚Æ‚Á‚Ă̍•‰æ–Ê

ƒfƒUƒCƒi[‚É‚Æ‚Á‚āA•‰æ–Ê‚ð‚‚©‚Á‚ăRƒ}ƒ“ƒh‚ŏˆ—‚ðs‚¤‚Æ‚¢‚¤‚̂́A•~‹‚ª‚‚©‚Á‚½‚肵‚ÄŽg‚¤‚Ì‚ª‹êŽè‚Æ‚¢‚¤l‚ª‘½‚¢‚Å‚·BŽ©•ª‚àˆÈ‘O‚Í‚»‚̂ЂƂè‚ŁAƒ^[ƒ~ƒiƒ‹‚ŃRƒ}ƒ“ƒh‚ð“ü—Í‚µ‚ĉ½‚©‚ðs‚¤‚Æ‚¢‚¤‚±‚Æ‚Í‹êŽè‚Å‚µ‚½B

‚µ‚©‚µASass‚̃Rƒ}ƒ“ƒh‚ð“ü‚ê‚é‚­‚ç‚¢‚Å‚µ‚½‚ç‚»‚ñ‚ȑ債‚½‚±‚Æ‚È‚©‚Á‚½‚̂ŁAŽdŽ–‚·‚é‘O‚Ɉê“x‹N“®‚µ‚Ä‚¨‚¢‚āA‚ ‚Ƃ̓EƒBƒ“ƒhƒE‚ð‚µ‚Ü‚Á‚Ä‚»‚Ì‚Ü‚Ü‚É‚µ‚Ä‚¢‚Ü‚·B

•‚¢‰æ–ʂɂ‚¢‚Ă͈ȑO‚ɏ‘‚¢‚½u•‚¢‰æ–ʂƏ­‚µí‚Á‚Ä‚Ý‚Ä‚¢‚év‚ÅŽg‚Á‚Ä‚Ý‚Ä‚¢‚邱‚Æ‚ð‘‚¢‚Ä‚¨‚«‚Ü‚µ‚½B

Sass‚ðŽg‚¤—¬‚ê

Sass‚ðŽg‚¤ŠT—v‚Æ‚µ‚Ä‚Ì—¬‚ê‚Ì‚¨‚³‚ç‚¢

1: Sassƒtƒ@ƒCƒ‹‚̍쐬ixxx.scssj
2: CSSƒtƒ@ƒCƒ‹ì¬‚̃Rƒ}ƒ“ƒh‚ւ̃Rƒ“ƒpƒCƒ‹ixxx.scss ¨ ƒRƒ“ƒpƒCƒ‹j
3: ƒRƒ“ƒpƒCƒ‹Š®—¹ixxx.scss ¨ ƒRƒ“ƒpƒCƒ‹ ¨ xxx.cssj

ƒRƒ}ƒ“ƒh‚É‚æ‚éSass

Sass‚̃Rƒ}ƒ“ƒh‚ð“ü—Í‚·‚邽‚߂̃Xƒeƒbƒv‚͈ȉº‚̂悤‚É‚µ‚Ä‚¢‚Ü‚·

‚PDSass‚ðŽg‚¤ƒfƒBƒŒƒNƒgƒŠ‚܂ňړ®

•‰æ–Ê‚Å‚àƒfƒBƒŒƒNƒgƒŠ‚̈ړ®‚ª•K—v‚Å‚·BMac‚Å‚¢‚¤‚Æ‚±‚ë‚ÌFinder‚ÅŽg‚¤‚½‚߂̃fƒBƒŒƒNƒgƒŠ‚ð‘I‘ð‚·‚éì‹Æ‚Å‚·Bƒ}ƒEƒX‚ƃNƒŠƒbƒNˆÚ“®‚·‚é‚Ù‚¤‚ªŠy‚È‚Ì‚Í‚í‚©‚è‚Ü‚·‚ªAƒRƒ}ƒ“ƒh‚Å‚à‚¿‚å‚¿‚å‚Á‚Æ“ü‚ê‚邾‚¯‚Å‚·i¦1jB

cd ƒfƒBƒŒƒNƒgƒŠƒpƒX

ƒfƒBƒŒƒNƒgƒŠ‚̈ړ®‚Ícd‚Æ‚¢‚¤ƒRƒ}ƒ“ƒh‚ŁAƒXƒy[ƒX‚ðˆê‚‚ ‚¯‚Ä‚©‚çAƒvƒƒWƒFƒNƒg‚ª•Û‘¶‚µ‚Ä‚ ‚éƒfƒBƒŒƒNƒgƒŠ‚܂ł̃pƒXiƒfƒBƒŒƒNƒgƒŠ‚ÌŠK‘w‚ð‚½‚Ç‚é“¹j‚ð“ü—Í‚Å‚·B‚±‚±‚¾‚¯‚Í‚»‚ꂼ‚ê‚ÌPCŠÂ‹«“à‚Ì‚Ç‚±‚É•Û‘¶‚µ‚Ä‚¢‚é‚Ì‚©‚É‚æ‚è‚Ü‚·‚̂ŁAÈ—ªB

‚¿‚È‚Ý‚ÉŽ©•ª‚Íworks‚Æ‚¢‚¤ƒtƒHƒ‹ƒ_‚ɂЂƒʂè‚܂Ƃ߂čì‹Æ—p‚̃vƒƒWƒFƒNƒg‚ð‚Ü‚Æ‚ß‚Ä‚¢‚é‚̂ŁA‚»‚±‚܂ł̃pƒX‚ð“ü—Í‚·‚邱‚Æ‚É‚È‚è‚Ü‚·B

‚à‚µ“ü—Í‚·‚éƒpƒX‚ª‚í‚©‚ç‚È‚­‚Ä‚àAŽg‚Á‚Ä‚¢‚éƒVƒFƒ‹‚Æ‚¢‚¤‚à‚Ì‚É‚æ‚è‚Ü‚·‚ªAŠî–{“I‚É‚ÍtabƒL[‚ð‰Ÿ‚·‚±‚ƂŁAŒó•â‚ªƒYƒ‰ƒb‚Əo‚Ä‚«‚Ä‚­‚ê‚é‚悤‚Å‚·B‚»‚ê‚ð‚Ý‚Ä“ü—Í‚µ‚Ĉړ®‚·‚é‚Ì‚ªŠy‚¾‚ÆŽv‚¢‚Ü‚·B–l‚ÌŽg‚Á‚Ä‚¢‚ézsh‚̃VƒFƒ‹‚àtabƒL[‚ð‰Ÿ‚·‚±‚Ƃňꗗ‚ª‚Å‚Ä‚«‚Ä‚­‚ê‚āA‚»‚ê‚ð‘I‘ð‚µ‚Ä‚¢‚邾‚¯‚ňړ®‚ª‚Å‚«‚é‚悤‚É‚µ‚Ä‚¢‚Ü‚·B

‚QDSassƒtƒ@ƒCƒ‹‚ƃRƒ“ƒpƒCƒ‹Œã‚̃tƒ@ƒCƒ‹

Sass‚̃tƒ@ƒCƒ‹‚ƃRƒ“ƒpƒCƒ‹Œã‚̃tƒ@ƒCƒ‹‚ðƒRƒ}ƒ“ƒh‚ÅŽw’肵‚ăRƒ“ƒpƒCƒ‹‚ð‚µ‚Ü‚·B‰º‹L‚Ì—á‚Ístyle.scssƒtƒ@ƒCƒ‹‚ðstyle.cssƒtƒ@ƒCƒ‹

// sass ƒRƒ“ƒpƒCƒ‹‘Oxxx.scss:ƒRƒ“ƒpƒCƒ‹Œãxxx.css
sass sass/style.scss:css/style.css

‚µ‚©‚µ–ˆ‰ñ‚±‚̃Rƒ}ƒ“ƒh‚ð’@‚¢‚Ä‚¢‚é‚Ì‚Í–Ê“|‚¾‚µA•Û‘¶Œã‚É‚·‚®‚ÉŠm”F‚Å‚«‚é‚Ù‚¤‚ª‚¢‚¢B

Sass‚É‚Í•Û‘¶‚ðŠÄŽ‹‚µ‚Ä‚­‚ê‚邽‚߂̃Rƒ}ƒ“ƒh‚ª‚ ‚é‚̂ŁA‚»‚ê‚ðŽg‚¢‚Ü‚·B

‚RDSassƒtƒ@ƒCƒ‹‚Ì•Û‘¶‚ÌŠÄŽ‹

’P‘̂̃tƒ@ƒCƒ‹‚ðŠÄŽ‹‚·‚éê‡‚͉º‹L

// sass --watch ƒRƒ“ƒpƒCƒ‹‘Oxxx.scss ƒRƒ“ƒpƒCƒ‹Œãxxx.css
sass --watch sass/style.scss:css/style.css

ƒfƒBƒŒƒNƒgƒŠ‚²‚ÆŠÄŽ‹‚·‚邽‚ß‚É‚Í

// sass --watch ƒRƒ“ƒpƒCƒ‹‘Oxxx.scss ƒRƒ“ƒpƒCƒ‹Œãxxx.css
sass --watch sass:css

‚SDƒRƒ“ƒpƒCƒ‹Œã‚̃Xƒ^ƒCƒ‹

ƒfƒtƒHƒ‹ƒg‚̏ó‘ԂŃRƒ“ƒpƒCƒ‹‚ð‚·‚é‚ƁAƒlƒXƒg‚ŃCƒ“ƒfƒ“ƒg‚³‚ꂽƒR[ƒh‚ªo—Í‚³‚ê‚Ü‚·

Sass‚ÌTutorial‚ł̃R[ƒh‚ðŽQl‚É‚Ý‚Ä‚Ý‚Ü‚µ‚傤

yƒRƒ“ƒpƒCƒ‹‘Oz

/* style.scss */

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

yƒRƒ“ƒpƒCƒ‹Œãz

/* style.css */

#navbar {
  width: 80%;
  height: 23px; }
  #navbar ul {
    list-style-type: none; }
  #navbar li {
    float: left; }
    #navbar li a {
      font-weight: bold; }

‚±‚ê‚̓Rƒ“ƒpƒCƒ‹Œã‚̃Xƒ^ƒCƒ‹‚ªƒfƒtƒHƒ‹ƒg‚Å‚Ícompressed‚ÌŒ`Ž®‚ð‚Æ‚Á‚Ä‚¢‚é‚©‚ç‚Å‚·B

Sass‚ɂ̓Rƒ“ƒpƒCƒ‹Œã‚̃Xƒ^ƒCƒ‹iOutput Stylej‚ª‚SŽí—Þ—pˆÓ‚³‚ê‚Ä‚¢‚āA‚»‚ê‚ðƒRƒ}ƒ“ƒh‚ÅŽw’肵‚Ä‚¨‚­‚±‚Æ‚ª‚Å‚«‚Ü‚·B

‚Ђƒʂè‚Ý‚Ä‚Ý‚Ü‚µ‚傤

:nested

ƒlƒXƒg‚ªƒCƒ“ƒfƒ“ƒg‚³‚ꂽŒ`Ž®‚ł̏o—Í

// --style nested
sass sass/style.scss:sass/style.css --style nested 

yƒRƒ“ƒpƒCƒ‹Œãz

#navbar {
  width: 80%;
  height: 23px; }
  #navbar ul {
    list-style-type: none; }
  #navbar li {
    float: left; }
    #navbar li a {
      font-weight: bold; }

:expanded

ƒlƒXƒg‚̃Cƒ“ƒfƒ“ƒg‚ª‚È‚¢ó‘Ԃł̏o—́BŽ©•ª‚͒ʏí‚ÌCSS‚Í‚±‚ÌŒ`‚ŏo—Í‚µ‚Ä‚¢‚é‚̂ŁA”[•i‚·‚é‚悤‚ÈŒ`Ž®‚ÅŽw’肪‚È‚¯‚ê‚Ίî–{‚Í‚±‚ÌŒ`‚É‚µ‚Ä‚¢‚邱‚Æ‚ª‘½‚¢‚Å‚·B

// --style expanded
sass sass/style.scss:sass/style.css --style expanded 

yƒRƒ“ƒpƒCƒ‹Œãz

#navbar {
  width: 80%;
  height: 23px;
}
#navbar ul {
  list-style-type: none;
}
#navbar li {
  float: left;
}
#navbar li a {
  font-weight: bold;
}

:compact

ƒZƒŒƒNƒ^‚²‚Æ‚É‚Ps‚¸‚‚ɃRƒ“ƒpƒNƒg‚É‚È‚Á‚½Œ`Ž®BƒvƒƒWƒFƒNƒgis’†‚È‚Ç‚Í‚±‚ÌŒ`Ž®‚Ői‚ß‚Ä‘½­‚ÍŒy—ʉ»‚µ‚ēǂݍž‚ñ‚Å‚¢‚邱‚Æ‚ª‘½‚¢‚Å‚·BŒÂl“I‚ɂ͍s”‚ªŠm”F‚Å‚«‚é‚Ì‚Å‚±‚ÌŒ`Ž®‚ªŠy‚¾‚ÆŽv‚Á‚Ä‚¢‚Ü‚·B

// --style compact
sass sass/style.scss:sass/style.css --style compact 

yƒRƒ“ƒpƒCƒ‹Œãz

#navbar { width: 80%; height: 23px; }
#navbar ul { list-style-type: none; }
#navbar li { float: left; }
#navbar li a { font-weight: bold; }

:compressed

‘S‚Ä‚ðˆês“à‚É‚Ü‚Æ‚ß‚½Œ`Ž®Bˆê”ÔŒy—ʁB

// --style compressed
sass sass/style.scss:sass/style.css --style compressed 

yƒRƒ“ƒpƒCƒ‹Œãz

#navbar{width:80%;height:23px}#navbar ul{list-style-type:none}#navbar li{float:left}#navbar li a{font-weight:bold}

ƒRƒ}ƒ“ƒh‚¿‚å‚Á‚ƒljÁ‚·‚邾‚¯‚ŕύX‰Â”\‚Ȃ̂ŁA‚»‚ÌŽžX‚É‚æ‚Á‚ÄŒ`Ž®‚ð‘I‚ׂé‚悤‚É‚È‚Á‚Ä‚¢‚Ü‚·B‚¢‚ë‚ñ‚ȃc[ƒ‹‚ðŽg‚¤ê‡‚Å‚àA‚±‚Ì‚Ö‚ñ‚̐ݒ肪Å‰‚É‚ ‚Á‚½‚肵‚Ü‚·‚æ‚ˁB

ƒLƒƒƒbƒVƒ…‚ðì‚ç‚È‚¢

Sass‚ðƒRƒ}ƒ“ƒh‚Å’@‚¢‚Ä‚¢‚é‚Æ‹C‚­‚ÆŽv‚¤‚Ì‚Å‚·‚ªA.sass-cache‚Æ‚¢‚¤ƒtƒHƒ‹ƒ_‚ªŽ©“®“I‚É‚Å‚Ä‚«‚Ü‚·BŠî–{“I‚ɂ͏o—Í‚³‚ê‚Ä‚¢‚Ä‚à–³Ž‹‚µ‚½‚ç‚¢‚¢‚Ì‚Å‚·‚ªA‚±‚ê‚ðì‚肽‚­‚È‚¢‚Æ‚¢‚¤ê‡‚à‚ ‚é‚©‚à‚µ‚ê‚Ü‚¹‚ñi‚ ‚é‚Ì‚©Hj‚»‚ñ‚ȏꍇ‚̓Rƒ}ƒ“ƒh‚É‚¿‚å‚Á‚ƉÁ‚¦‚邾‚¯‚ŏo—Í‚³‚ê‚È‚¢‚悤‚É‚È‚è‚Ü‚·B

--no-cache

--no-cache‚̃Rƒ}ƒ“ƒh‚ð’ljÁ‚·‚邾‚¯‚Å‚·

// --no-cache
sass sass/style.scss:sass/style.css --no-cache 

‚±‚ê‚ŃLƒƒƒbƒVƒ…‚ðì‚炸‚ɃRƒ“ƒpƒCƒ‹‚·‚邱‚Æ‚ª‚Å‚«‚Ü‚·B

Ž©•ª‚ª‚æ‚­Žg‚Á‚Ä‚¢‚éƒRƒ}ƒ“ƒh

‚±‚±‚Ü‚Å‚¢‚ë‚¢‚돑‚«‚Ü‚µ‚½‚ªAÅI“I‚ÉŽ©•ª‚͉º‹L‚̂悤‚ÈŒ`‚ŃRƒ}ƒ“ƒh‚½‚½‚¢‚āA‚ ‚Æ‚Í•ú’u‚µ‚Ä‚¨‚¢‚Ä‚Ü‚·B

sass --watch sass:css --style compact --no-cache 

ˆÈãŠÈ’P‚ÉŠî–{‚ðB‚Ý‚È‚³‚ñ‚͂ǂ̂悤‚ÉŽg‚Á‚Ä‚¢‚é‚Å‚µ‚傤‚©Hƒc[ƒ‹‚ðŽg‚¤‚Ì‚àŠy‚Å‚·‚ªAƒRƒ}ƒ“ƒh‚¾‚Á‚Ĉê“xƒRƒ}ƒ“ƒh“ü—Í‚µ‚½‚ ‚Ƃ͉½‚à–Ê“|‚È‚±‚Æ‚Í‚È‚¢‚̂ŁA‚±‚ꂾ‚¯‚Å‚·‚̂ŁA–Ê“|‚È‚¯‚ê‚΃c[ƒ‹Žg‚킸‚Ƀ^[ƒ~ƒiƒ‹‚È‚ÇŽg‚¤‚Ì‚Í‚Ç‚¤‚Å‚µ‚傤‚©H

¦1FˆÚ“®‚µ‚Ä‚¨‚©‚È‚­‚Ä‚àŽg‚¦‚Ü‚·‚ª‚í‚©‚è‚â‚·‚¢‚悤‚Ɉړ®‚µ‚Ä‚¢‚Ü‚·