stylusでいい感じに連番をふる

小ネタです。

stylusで、イテレーション使って
.number-1
.number-2
...
みたいなクラスに対して、contentに数字を入れるようなルールを定義したいとき。すごく普通にやりますと、

stylus

for i in (1..5)
  .number-{i}
    &::before
      content i

css

.number-1::before {
  content: 1;
}
.number-2::before {
  content: 2;
}
.number-3::before {
  content: 3;
}
.number-4::before {
  content: 4;
}
.number-5::before {
  content: 5;
}

こうなります。駄目です。

stackoverflowで見かけたやつですと、

stylus

for i in (1..5)
  .number-{i}
    &::before
      content \'i\'

css

.number-1::before {
  content: ' 1 ';
}
.number-2::before {
  content: ' 2 ';
}
.number-3::before {
  content: ' 3 ';
}
.number-4::before {
  content: ' 4 ';
}
.number-5::before {
  content: ' 5 ';
}

何だこのスペース。
気にしなきゃいいのかもしれないけれど、たまにレイアウトに干渉するのが難点。

いろいろ内部関数なども調べてみたけれど、まったく関係なく

stylus

for i in (1..5)
  .number-{i}
    &::before
      content "" + i

css

.number-1::before {
  content: '1';
}
.number-2::before {
  content: '2';
}
.number-3::before {
  content: '3';
}
.number-4::before {
  content: '4';
}
.number-5::before {
  content: '5';
}

なんというかトンチみたいな解決法でした。考えすぎでした。