css - プロパティ値の％をforループ変数と一緒に使用した場合のSASSエラー

Question

寄付バロメーター（プログレスバーを考えてください）のCSSを生成するためにいくつかのSASS（.scss）を作成しようとしています。

必要なCSSは次のようになります。

.p-0:after {
    left: 0%;
}

.p-1:after {
    left: 1%;
}

[... up to 100]

私が持っているSASSはこれです：

@for $i from 0 through 100 {
    .p-#{$i}:after {left: #{$i}%;}
}

これは私にこのエラーを与えます：

Syntax error: Invalid CSS after "...r {left: #{$i}%": expected expression (e.g. 1px, bold), was ";}"

奇妙なことに、上記のSASSの「％」を「px」に置き換えると、SASSは完全にクールになりますが、それは私が必要としているものではありません。

たぶんこれは非常に明白ですが、私はこのSASSのことにはかなり慣れていません。

score 0 · Accepted Answer

奇妙に見えますが、値に1％を掛けてみてください。

@for $i from 0 through 100 {
  .p-#{$i}:after {left: #{$i*1%};}
}

1 に答える 1