【SCSS】forループでパーセント%を使う方法｜エラー対処法：ModuleBuildError: Module build failed SassError: Expected expression

scss（sass）使ってforループを使っているときに、ループの中で「%（パーセント）」を記述するとコンパイルエラーが発生します。

ここでは、scssのforループの中で「%（パーセント）」を使って指定する方法を実例で解説しています。

エラーの内容

例えば、以下のようにforループで、widthを「%」で指定したとします。

@for $i from 1 through 10{
  .box{ width: #{$i * 10}%;}
}

これをコンパイルすると、途中で以下のようなエラーが発生します。

ERROR in ./resources/sass/app.scss
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected expression.
   ╷
23 │   .box{ width: #{$i * 10}%;}
   │                          ^

％の部分が指定され、コンパイルできないと表示されます。

対処法（パーセントを使う方法）

scssのforループの中で「%」を使いたい場合は、末尾に「％」をつけるのではなく、数値や計算処理自体を「percentage」の引数に渡します。

percentage(数値や計算)

実例

数式処理をpercentageで囲み、計算は100を掛けたときに欲しい％になるようにします。

@for $i from 1 through 5{
  .box{ width: #{percentage($i * 0.1)};}
}

　↓　コンパイル

.box {
  width: 10%;
}

.box {
  width: 20%;
}

.box {
  width: 30%;
}

.box {
  width: 40%;
}

.box {
  width: 50%;
}                   

正しく、％の指定にコンパイルできています。

（補足）セレクタの中や文字列としての%は指定できる

CSSの処理に「%」を直接指定することはできませんが、セレクタの中などの文字列に対しては「％」の指定が可能です。

例えば以下のように、「data-length」というdata属性の値を「%」を使って指定したとします。

@for $i from 1 through 5{
  div[data-length="#{$i * 10}%"]{ width: #{percentage($i * 0.1)};}
}

この場合[data-length="#{$i * 10}%"]の部分は意図した通りにコンパイルされます。

　↓　コンパイル結果

div[data-length="10%"] {
  width: 10%;
}

div[data-length="20%"] {
  width: 20%;
}

div[data-length="30%"] {
  width: 30%;
}

div[data-length="40%"] {
  width: 40%;
}

div[data-length="50%"] {
  width: 50%;
}