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，爽。