[haml][sass][rails] SassのMixinと改行にご注意!!
追記
以下の不具合は、haml2.2.0のバージョンでは修正されています。
id:ursmさんありがとうございます。
Rails製オープンソース社内SNS"SKIP"の開発で嵌ったのでメモ。
SKIPでは、CSSの記述にSassを利用しています。
タイトルの通り、SassのMixinの定義の際に改行があるなしで嵌った。
通常Sassでは、インデントで解釈するので以下の様に改行があってもインデントの通りにCSSを生成してくれます。
/Users/mat/dev/skip/tmp/sass_test% cat indention.sass .b_class :color #111 p :color #222 /Users/mat/dev/skip/tmp/sass_test% sass indention.sass .b_class { color: #111; } .b_class p { color: #222; }
しかし、以下のようにmixinの定義中に改行が含まれる場合、想像と違う動きをしました。
/Users/mat/dev/skip/tmp/sass_test% cat mixin_with_indention.sass =a_mixin :color #fff :width 50% # <= ここに改行 p :background-color #000 .a_class +a_mixin /Users/mat/dev/skip/tmp/sass_test% sass mixin_with_indention.sass p { background-color: #000; } .a_class { color: #fff; width: 50%; }
pの定義を勝手にするなよ!!!インデント的には、mixinの中でしょ!!!
改行を除くと以下のような生成結果になります。これは、想定通り。
/Users/mat/dev/skip/tmp/sass_test% cat mixin_without_indention.sass =a_mixin :color #fff :width 50% p :background-color #000 .a_class +a_mixin /Users/mat/dev/skip/tmp/sass_test% sass mixin_without_indention.sass .a_class { color: #fff; width: 50%; } .a_class p { background-color: #000; }
んー、バグじゃないの???mixinの定義には改行を入れてはいけないと何処かに書いてあるの???
最新だと直ってるのかな???
教えて、日ハムの人!!!
ということでまとめ。
Sassでmixinを定義するときは、定義中に改行を入れてはいけない。