LESSをコンパイルするとcalc関数がおかしくなる問題と解決策

Koala等のコンパイラを使ってLESSファイルをコンパイルするとcalc関数がおかしくなる問題とその解決策です。

何がどうおかしくなるのか

例えば、こんなコードをLESSで書いたとします：

 .main { width: calc(100% + 60px) }

するとこんな風に出力されてしまいます：

 .main { width: calc(160%) }

と、このように単位が無視され、ただの足し算になってしまいます。
主に単位が異なる時にcalcは使うものなのでこれでは困ってしまいます。

スポンサーリンク

解決策

.main { width: ~"calc(100% + 60px)"; }

このように~" "で囲むとその部分がコンパイルされずに出力されるのでこれで正常にコンパイル出来るようになります 

Githubのフォーラムから解決策をお借りしました。ありがとうございます。

変数を使いたい場合

上の解決策だと、その部分がコンパイルされなくなるので変数を使った計算ができなくなってしまいます。
それを解決するにはこのようなコードを書きます：

.main { width: ~"calc(@{width} + 60px)"; }

このように、変数名を大カッコ({})で囲むと変数を正常にコンパイル出来るようになり、かつ正しくcalc関数を使えるようになります。

スポンサーリンク

〆

これはLESSでしか起きない問題のようで、試しにSASS(Scss)でやってみたら問題なくcalc関数をコンパイル出来ていました。

初めはkoalaというコンパイルに起因する問題だと思って調べていて、Github上では2015年1月から報告されている問題だったので、なぜ修正されないのかと思って調べると、実はコンパイラの問題ではなく、LESSに起因する問題であることを知りました。

先ほどのURLのフォーラムを見ていただけば分かる通り、2012年の段階で認知されています。が、未だに修正されていません…
早く修正してくれることを願います。