開発環境(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);
}
}
}
|
