開発環境(development)で問題なかったのにdeployしようとしたらprecompileでこける。

1
2
3
4
rake aborted!
Sass::SyntaxError: Invalid CSS after "...idth: Infinity%": expected expression (e.g. 1px, bold), was "; }"
  (in /var/www/hogehoge/app/assets/stylesheets/fuga/fuga.css.scss)
(sass):12

見た目にも問題なさそうだし、念のためscss-lintとかも通してみたけど問題なさそう。

原因究明のためちょっとずつソースを削ってはコンパイルを繰り返したところ、 compile errorになっていた原因はここにありました。 わかりますか?

1
2
3
4
5
6
$colNums: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
@each $colNum in $colNums {
  &.col-#{$colNum}{
    width: 100% / $colNum;
  }
}

エラー文言がsyntax error的なので構文エラーな箇所を必死に探していました。 結局0で割ってるからというどうしようもないミスでした。 結果こうなりました。

1
2
3
4
5
6
7
8
9
10
$colNums: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
@each $colNum in $colNums {
  &.col-#{$colNum}{
    @if $colNum == 0{
      width: 100%;
    }@else{
      width: (100% / $colNum);
    }
  }
}

Comments