寫 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,爽。
張貼留言