Sassで0始まりの数値を使用した際、コンパイル後に0が省略される

タイトルの通りですが、Sassで0始まりの数値を使用した際に0が省略されてしまうということがあったので、備忘録としてメモ。

サンプルコード

やろうとしたことは、マップのkey値に0始まりの連番を指定して、class名にその連番を使用するという実装です。

$categories: (
  001: #58C9B9,
  002: #F68657,
  003: #6AAFE6
);
@each $key, $category in $categories {
  .category--#{$key} {
    color: $category;
  }
}

これをコンパイルした場合、0が省略されて想定したclass名になりませんでした。

.category--1 {
  color: #58c9b9;
}
.category--2 {
  color: #f68657;
}
.category--3 {
  color: #6aafe6;
}

対応としては、マップのkey値で文字列として指定すれば解消されます。

$categories: (
  "001": #58C9B9,
  "002": #F68657,
  "003": #6AAFE6
);
@each $key, $category in $categories {
  .category--#{$key} {
    color: $category;
  }
}

これで意図したclass名にすることができました。

.category--001 {
  color: #58c9b9;
}
.category--002 {
  color: #f68657;
}
.category--003 {
  color: #6aafe6;
}