Stylus プロパティの値に変数名を変数で指定したい。

タイトルからして超ニッチというか、意味がわからない感じですが、
例えばこんなHTMLがあったとします。

<ul class="myNav">
  <li class="theme-1"><a class="btn">01</a></li>
  <li class="theme-2"><a class="btn">02</a></li>
  <li class="theme-3"><a class="btn">03</a></li>
  <li class="theme-4"><a class="btn">04</a></li>
  <li class="theme-5"><a class="btn">05</a></li>
  <li class="theme-6"><a class="btn">06</a></li>
  <li class="theme-7"><a class="btn">07</a></li>
  <li class="theme-8"><a class="btn">08</a></li>
  <li class="theme-9"><a class="btn">09</a></li>
  <li class="theme-10"><a class="btn">10</a></li>
</ul>

10個の連番のエリアが合って各番号ごとにテーマ色があって、ボタンの背景色をそのテーマ色にしたい時とか。
Stylusでループでクラスを指定して、値も変数の連番で指定できると楽です。
どうやらStylusでは、プロパティの値は
「文字列と変数を結合するなどしてできた文字列が、変数名として定義されてあれば、その変数に指定されいる値になる」
様です。文字にすると説明しづらい...

@import 'nib';
// 変数で各番号のテーマ色を持っておく
themeCol-1  = #908cc6;
themeCol-2  = #f198be;
themeCol-3  = #98ce00;
themeCol-4  = #ff9a00;
themeCol-5  = #62b0e5;
themeCol-6  = #41a79e;
themeCol-7  = #5483b8;
themeCol-8  = #d14e4a;
themeCol-9  = #efd163;
themeCol-10 = #b08126;

.myNav
  for n in (1..10)
    // プロパティは {変数名} で指定できる 
    .theme-{n}
      .btn
        // 値は + で結合して 定義されている変数名になれば、変数で指定されている値が使われる
        background-color: themeCol- + n

.myNav
  clearfix()
  text-align: center
  list-style: none
  > li
    float: left
    padding: 0 1em
  .btn
    color: #FFF
    display: block
    line-height: 2em
    border-radius: 50%
    width: 2em
    height: 2em
    opacity: .6
    transition: all .25s
    &:hover
      opacity: 1

↓ コンパイル結果

#my-nav .item-1 {
  background-color: #908cc6;
}
#my-nav .item-2 {
  background-color: #f198be;
}
#my-nav .item-3 {
  background-color: #98ce00;
}
#my-nav .item-4 {
  background-color: #ff9a00;
}
#my-nav .item-5 {
  background-color: #62b0e5;
}
#my-nav .item-6 {
  background-color: #41a79e;
}
#my-nav .item-7 {
  background-color: #5483b8;
}
#my-nav .item-8 {
  background-color: #d14e4a;
}
#my-nav .item-9 {
  background-color: #efd163;
}
#my-nav .item-10 {
  background-color: #b08126;
}
#my-nav .item-11 {
  background-color: #b8cad1;
}
#my-nav .item-12 {
  background-color: #c59f5f;
}
#my-nav .item-13 {
  background-color: #6f7731;
}
#my-nav .item-14 {
  background-color: #fcd000;
}
#my-nav .item-15 {
  background-color: #76daff;
}
/* test */
.myNav .theme-1 .btn {
  background-color: #908cc6;
}
.myNav .theme-2 .btn {
  background-color: #f198be;
}
.myNav .theme-3 .btn {
  background-color: #98ce00;
}
.myNav .theme-4 .btn {
  background-color: #ff9a00;
}
.myNav .theme-5 .btn {
  background-color: #62b0e5;
}
.myNav .theme-6 .btn {
  background-color: #41a79e;
}
.myNav .theme-7 .btn {
  background-color: #5483b8;
}
.myNav .theme-8 .btn {
  background-color: #d14e4a;
}
.myNav .theme-9 .btn {
  background-color: #efd163;
}
.myNav .theme-10 .btn {
  background-color: #b08126;
}
.myNav {
  zoom: 1;
  text-align: center;
  list-style: none;
}
.myNav:before,
.myNav:after {
  content: "";
  display: table;
}
.myNav:after {
  clear: both;
}
.myNav > li {
  float: left;
  padding: 0 1em;
}
.myNav .btn {
  color: #fff;
  display: block;
  line-height: 2em;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  -ms-transition: all 0.25s;
  transition: all 0.25s;
}
.myNav .btn:hover {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}

サンプル

コードが長々となってるけど、こんな感じに使えます。

See the Pen colorful navigation by KiKiKi (@chaika-design) on CodePen.

おまけ

尚、HTMLもjadeを使えば、簡単に書ける。
サンプルのHTMLはjadeで書くとこれだけ。

- i = 0
ul.myNav
  while i < 10
    - i++
    li(class="theme-#{i}")
      - var no = i
      if i < 10
        - no = '0' + i
      a.btn= no

個人的にHTML+CSSのコーディングは jade + stylus がオススメ！

---

• Expressive, dynamic, robust CSS — expressive, robust, feature-rich CSS preprocessor
• Jade - Template Engine

TVアニメ/データカードダス『アイカツスターズ!』挿入歌シングル1「ハルコレ」