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

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

ドキュメント

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

基本的には同じ。

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

こちらがわかりやすい。

shorthands

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

@extend shorthand を mixin で作る

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

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

See the Pen Sass Indented Syntax @extend mixin by DriftwoodJP (@DriftwoodJP) on CodePen.

困ったときは

変換ツール

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

# 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 とか。