糕飛.想點三十而立.努力發奮

2012年9月17日 星期一

Sass 初探

+ 暫沒回應
Sass 為 CSS3 的 extension,將 CSS 變得更方便。

寫 CSS 時,很多事會遇到重覆的 rules :
.grayBox{
  border: 1px solid #EEE;
}
.grayBoxContent{
  background-color: #EEE;
}


programmer 遇到這類 code 的話會想用 variable,這時便要用 Sass 了:

@grayColor: #EEE
.grayBox{
  border: 1px solid $grayColor;
}
.grayBoxContent{
  background-color: grayColor;
}

除了支援 variable,Sass 還可用 nesting。

CSS 是這樣的話:
.heading{
  width: 100px;
}
.heading div{
  font-size: 1.2em;
}
.heading div span{
  color: red;
}
.heading div span a{
  font-weight: bold;
}
Sass 便可以簡化成:
.heading{
  width: 100px;
  div {
  font-size: 1.2em;
    span{
      color: red;
      a{
        font-weight: bold;
      }
    }
  }
}
省回不少字串,打錯字的機會更少,更改時更方便!

還有更方便的一點,是支援 mixin,則類似 resue code snippet:
CSS:
.heading1{
  color: red;
  background-color: blue;
  border: 1px solid #eee;
  font-size: 1.2em;
}
.heading2{
  color: red;
  background-color: blue;
  border: 1px solid #eee;
  font-size: 1.4em;
}
Sass 只需用:
@heading-style{
  color: red;
  background-color: blue;
  border: 1px solid #eee;
}
.heading1{
  @include heading-style;
  font-size: 1.2em;
}
.heading2{
  @include heading-style;
  font-size: 1.4em;
}

用 Sass 真的方便不少,有興趣的話可以到官方網站看看 tutorial

唯一缺點是用 Sass 一定要 compile 回 CSS,瀏覽器才懂用。轉換的過程雖然簡單,但在 windows 上用不太方便。而用 ruby on rails 的話有 gems 替你自動轉換,還可以用 Compass,爽。