読者です 読者をやめる 読者になる 読者になる

やるしかなっちゃん

やるしかない!

lessのcalcに死ぬほどハマった件

題名の通りのlessのcalcにとんでもない落とし穴があって今日見事にハマってしまった。
どんな落とし穴かというと下のようなよくあるcalcを書くとする。

width: calc(100% - 90px);

これをCSSコンパイルすると下のようになる

width: calc(10%);

100% - 90%になっとる(;´Д`)(;´Д`)(;´Д`)

どうやらコレは有名な不具合らしくて既にみんな知っていることだったらしい
ひょっとしてしらないのは僕だけだったのだろうか?

解決策としては以下のようにエスケープすれば良い

width: calc(~"100% - 90px");

いや〜この世は不思議なことだらけですねぇ