SCSS for文内のパーセント指定につきまして

Question

いつもお世話になっております。

SCSSのfor文内でパーセントを
セレクタの値に設定したのですが、
下記エラーが表示されます。
パーセント指定方法ございましたら
ご教示頂ければと存じます。

宜しくお願い致します。

@keyframes anim {
  @for $i from 0 through 100 {
    #{$i}%{
      width:#{$i}%;
    }
  }
}

codepen エラー内容
Invalid CSS after " width:#{$i}%": expected expression (e.g. 1px, bold), was ";"

Answer 1

該当箇所での%はpxのようにそのまま使用することはできないようです。
以下の方法ではいかがでしょうか。

%を変数展開を使用して記述する。

@keyframes anim {
  @for $i from 0 through 100 {
    #{$i}% {
      width: #{$i}#{'%'};
    }
  }
}

または、percentage関数を使用して記述する。

@keyframes anim {
  @for $i from 0 through 100 {
    #{$i}% {
      width: percentage($i/100);
    }
  }
}

Comments

[l_l]

ご回答ありがとうございます。
表示確認できました。
ご対応ありがとうございました。