node-sass 3.0が出て、Libsassも3.2に上がった。これによって@at-rootなど（個人的に）重要な機能が使えるようになったので移行した。
互換性に関してはsass-compabilityが有用。
なんでlibsassにしたいのか？
- gulp-sassのコンパイルが超早い。
- 今回の環境では100ファイルぐらいで6〜8秒ぐらいなのが1〜2秒ぐらいになった。
- gulp-ruby-sassの独特な記法から逃れられる
- rubyを別途依存させる必要がない
とかあたり。
ハマりどころ
互換性が担保されているとはいえ、ちょいちょい引っ掛かりがあった。
不正な色コードはエラーになる
今まではカラーコードが不正でも無視してくれていたが、libsassでは怒られてしまう。まあこれは普通になおすかそもそも効いてなかったので消せばよかった。
.foo{
color: #12345
}
IEのexpression構文がコケる
IEのexpression構文がどうもコケる。現在node-sassはlibsass3.2.2を利用しているようだが、3.2.4では改善されるらしい。
html {
filter: expression(document.execCommand("BackgroundImageCache",false, true));
}
が、わりと古い対応だったので削った。
本気で対応したい場合はJavaScriptで書きなおしちゃうのが筋として良いかもしれない。
@at-rootでの#{&}が不正なエラーになる。
これは一番変なハマり方した。
@at-rootと#{&}の組み合わせでエラーになるようだ。
エラーメッセージもunknownとなってしまってなかなか発見に時間がかかった。
@mixin box-sizing-border{
@at-root{
#{&}{
box-sizing: border-box;
*, *:before, *:after {
box-sizing: inherit;
}
}
}
}
この問題は一時変数に&を入れることで解決。
@mixin box-sizing-border{
@at-root{
$selector: &
#{$selector}{
box-sizing: border-box;
*, *:before, *:after {
box-sizing: inherit;
}
}
}
}
完全にバグを踏んだ気がするので、issueを報告してみたらこれも3.2.4で動くようになるから待っててねという感じっぽい。
calcの中で-o-calcが動かない
-o-calc(100% - 16px)だと%とpxで計算しているぞと怒られてしまう。
おそらく-ms-calcの対応issueがあるので、同様に-o-calcも入れなければなさそう。
今回の場合は別途で既にautoprefixerを入れていて、その消し忘れだったのでさくっと消した。
おそらくそうでなくてもautopreifxerを使うようにシフトするのが良いだろうと思う。
相対パスが効かない？(エラーが出ない）
これはちょっと深くは未検証。pathオプションなどの問題かもしれない
だいたいこんな構成だったとして
sass
├── _basic.scss
└── application.scss
// 読み込まれない（エラー出ない）
@import "basic";
// 読み込まれる
@import "sass/basic";
というように相対パスなら解決出来そうな（ruby-sassだとできていた）ものが読み込まれなくなっていた。
エラーも無かったのでdiffでやっと気づいた。あぶないあぶない。