[Sass & Compass] Sass 記法 (indented syntax) 入門

CSS にもだいぶ慣れてきて中括弧の厳しさが勝ってきたので、.scss (Sassy CSS) から .sass 記法に乗り換えます。

ドキュメント

公式ドキュメントはこちら。

• File: INDENTED_SYNTAX — Sass Documentation

基本的には同じ。

• 中括弧 {}、セミコロン ; がいらず、インデントで表現する

こちらがわかりやすい。

• 【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 – 納豆には卵を入れる派です。

shorthands

• @mixin と @include を shorthands で、それぞれ =, + と表現できる

@extend shorthand を mixin で作る

@extend の shorthand はないようでしたが、Kendall Totten さんの mixin を使います。

• abbreviated syntax for @include and @extend – Google グループ

=ext($name)
  @extend .#{$name} !optional
.foo
  background: red
.bar
  +ext("foo")

困ったときは

変換ツール

Sass をインストールすると標準で入っています。

• File: SASS_REFERENCE — Sass Documentation

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

まとめて変換・削除。

# Convert multiple files
% sass-convert -R source/css --from scss --to sass
% rm source/css/**/*.scss

.scss と併用してしまう

.scss で書いて @import してしまえば良いですよね。
IE hack とか。