再生核研究所: Sassにおけるcalc()関数でゼロを除算する方法

Sassにおけるcalc()関数でゼロを除算する方法

if文をつかう

今回、calc関数を使用してゼロを除算しようとした結果見事にハマってしまったのでメモ。

とても素晴らしいメモをMDNが記してくれていたのですが、

コチラのメモにもあるように「ゼロで割った結果はHTMLパーサーで生成されるエラーになります。」と書かれている。

どうやらゼロでは除算できないらしい。

解決策

そこで考えたのが@ifを使用してゼロで除算した結果と同じ値をプロパティとして適用することで実現できました。

@mixin offset($offset-left, $offset-right){
  @if $offset-left == 0 {
    margin-left: 0;
  }
  @if $offset-right == 0 {
    margin-right: 0;
  }
  @if $offset-left != 0 or $offset-right != 0{
    margin-left: calc(100% / (12 / #{$offset-left}));
    margin-right: calc(100% / (12 / #{$offset-right}));
}

Copy

こうすることでゼロで除算するのと同じ結果を得られることができました。

ゼロ除算でハマった人は是非参考にしてください。それでは。