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

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

[markdown]
## ドキュメント

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

> * [File: INDENTED_SYNTAX — Sass Documentation](http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html)

基本的には同じ。

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

こちらがわかりやすい。

> * [【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 – 納豆には卵を入れる派です。](http://d.hatena.ne.jp/ken_c_lo/20121220/1355948089)

## shorthands

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

### @extend shorthand を mixin で作る

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

> * [abbreviated syntax for @include and @extend – Google グループ](https://groups.google.com/d/msg/sass-lang/f5HIvqGjLUI/_stcYVIaZCsJ)

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

## 困ったときは

### 変換ツール

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

> * [File: SASS_REFERENCE — Sass Documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax)

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

まとめて変換・削除。

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

### .scss と併用してしまう

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