SASS記法例

.scssではなく.sassでプロジェクトつくるとき

compass create --syntax sass

とやると最初から.sassででてくる、便利

この記事がわかりやすかった

CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。

記法の主な違いは

• {}ではなくインデント(半角スペース2個分)でまとまりを表す
• ;いらない、いれるとエラーでる
• :のあとに半角スペース1個
• @mixinは=
• @includeは+

{}ないの落ちつかねぇ〜

でもscssでコードがどんどん入れ子になってくと構造わからなくなるしコードが長ければ長いほど恩恵受けるのかもしれない

例

.sass

=default
  font-size: 16px
  color: #808080
  line-height: 1.8em

$default-margin: 10px

.hoge
  margin: $default-margin
  h2
    font-size: 120%
  p
    +default

これをコンパイルすると

.css

.hoge {
  margin: 10px;
}
.hoge h2 {
  font-size: 120%;
}
.hoge p {
  font-size: 16px;
  color: gray;
  line-height: 1.8em;
}