たごもりすメモ

コードとかその他の話とか。

俺が本当のsassの書き方を教えてやる

ruby haml sass

タイトルはDMCからいただきました。
あとガチで巨大なものとか書きません。普通のCSSとか書くのはめんどいからインデント記法とか色計算とかでラクがしたいよねーという程度の人向けですよ。

sassってなんだっけ

sassでググると2008年とか2009年の記事があれこれひっかかる。
Sass で CSS をすっきり記述する - ursmの日記
SassでCSSの弱点を克服しよう − ＠IT
見てみると実にシンプルで良さそうに見える。インデントベースで色の計算とかやって、クラスごとにちょっとずつ変えられるぜ！みたいな。

!base_color = #ccc
div.foo
  :color = !base_color
  :border = 1px solid (!base_color - #333)
div.bar
  :color = !base_color
  :border = 1px solid (!base_color + #333)

んでこれを最新版のライブラリに食わせると、それはもうあらゆる行でdeprecatedとかいって怒られるわけですね。 orz

いっぽうちゃんとググってみると英語の本家サイト http://sass-lang.com/ がひっかかるので英語にメゲずに読んでみる。と、次のようなことが書いてある(日本語部分は自分の超適当な訳)。

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
SassはCSS3の拡張で、ネスト可能なルール、変数、Mixin、セレクタ継承やその他の機能が追加されている。

The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well.
Sass 3 という新しい文法はSCSSと呼ばれており、CSS3の文法のスーパーセットだ。つまり、有効なCSS3スタイルシートは有効なSCSSでもある。

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported.
ふたつめ、古い方の文法は単にSassと呼ばれるものだ。Hamlに影響を受けて、CSSに簡潔さを持ちこもうとしたものだ。ブロックを記述するのに、カッコとセミコロンのかわりにインデントを使用する。もはやこれは主流の文法ではないが、インデント記法もまだこれからサポートはされる。

ええとつまり、さっき見たみたいな文法はもう古いよ、ってことですかね。ついでにちょっと scss でググってみると、鉄骨がどうのとか加速器がどうのとか、そんな感じの楽しそうなページがひっかかります。もうちょっと遡ると SmartCSS という同種の何かがひっかかりますが、いま我々が格闘してるものとはどうやら違う実装みたい。みんな同じこと考えるんですね。でも俺はSinatraで使いたいからphpとかcppとか言われてもしょうがないの。。。

気を取り直して、じゃあオフィシャルにあるSCSSのコードを見てみると以下のような感じ。Tutorialから抜粋して改変。*1

$width_val: 80%

@mixin bold-link {
  font-weight: bold;
}

#navbar {
  width: $width_val / 2;
  height: 23px;
}

ul { list-style-type: none; }
li {
    float: left;
    a { @include bold-link; }
  }
}

先祖返りしてるじゃねえか！ CSSはそれが面倒だったのになんだこのカッコとかコロンとかセミコロンは！！！！１！！

と思わずにはいられません。よね。
まあTutorialの下の方を見ていくと、変数定義と値としての代入、あたりはともかく、関数定義とか変数展開とかMixinにしても引数つきMixinとか別ファイルからのimportとか、もう何がしたいんだと思わずにはいられません。
俺がやりたいのはCSSをもっと楽に重複なく書くことであって、別にCSSの文法でプログラミングとかがしたいわけじゃないんだが。あとそんなセレクタ階層の複雑なCSSとか本当に書きたくない。勘弁してください。

やりたいこと

自分がSassに期待していたことは以下の通り。

  • カッコとかコロンとかセミコロンとかできるだけ無くなってほしい
    • インデントは許せる(ぇーｗ
  • 同じ定義は1ヶ所に書いたものをあちこちから読み込みたい
    • 値は変数に入れたいし、styleの集合はMixinにしたい
    • スタイルに名前を付けたいだけでメタスタイルとか扱いたくないので、Mixin引数とかイラネ
  • 後から定義を調べるときに文字列検索できないと死ねる
    • つまり変数展開とか関数定義とか引数つきMixinとかは死ねばいい
  • できるだけ簡潔に書きたい
    • 前はMixinが '='(@mixin) と '+'(@include) で書けたのに、なんでJavaのアノテーションみたくなってんの……

というわけで、基本的には昔のSassのままで書きたいんだけど、今の処理系で怒られないためにどうすればいいの、みたいなあたりが落としどころだ。

書いてみるよ

基本的にはインデント主体の文法でMixinも従来のSassスタイルでOK。ただし変数の定義と値のセットだけはSass 3スタイルを使うこと。
以上。
さっきの恣意的なサンプルをこのスタイルで書くとこんな感じ。

$width_val: 80%

=bold-link
  :font-weight bold

#navbar
  :width $width_val / 2
  :height 23px

ul
  :list-style-type none
li
  :float left
  a
    +bold-link

どう見てもこっちのが見易いし書きやすいよね！ インデントはエディタが世話してくれるから大丈夫！ Mixinも記号で済ませたって、エディタがちゃんと他のルールとは違う色にして見分けやすくなってるから問題ないよ！

これだけの話でした。しばらくこの記法でやってみようと思います。インデント記法のサポートが打ち切られないように心の底から祈っております。

*1:ちなみにかなり恣意的な箇所の抜粋＋改変なので注意ｗ