Stylus ループ中に配列から値を取得する際に気をつけること

Stylusでループ中に配列から値をとってCSSを作ろうとした時にちょっとハマったのでメモ。

Stylusで配列から値をとって使う方法

// stylusの配列はの中にスペース区切りで書く
colors = red blue yellow
for i in (0..2)
  .font-color-{i}
    color: colors[i]

配列の定義は( )で囲って中にスペース区切りで記述してもOK

colors = (red blue yellow)

( )で囲ったほう個人的には見やすい

配列の定義でエラーになるケース

javascriptみたい[]で囲ったり,区切りにするとエラーになる

// javascript みたいに配列を定義するとエラー
colors = [red, blue, yellow]
// => ERROR expected "]", got ","

// [ ] で囲ってスペース区切りもエラーになる
colors = [red blue yellow]
// => ERROR color: colors[i] Cannot read property 'clone' of undefined

配列の値の取り方でエラーや意図しないCSSになるケース

1. 配列の添字を変数展開させるとエラー

colors = (red blue yellow)
for i in (0..2)
  .font-color-{i}
    color: colors[{i}]
// => ERROR expected ":", got "}"

2. 配列の添字の中で計算式を使う場合、演算子の前後にスペースがないとおかしな挙動になる
2-1. スペースがない場合

colors = (red blue yellow)
for i in (1..3)
  .font-color-{i}
    color: colors[i-1]
// 全て無視される
// => .color-1 { color: ; }
// => .color-2 { color: ; }
// => .color-3 { color: ; }

2-2. [i -1] 片方だけスペースがある場合

colors = (red blue yellow)
for i in (1..3)
  .font-color-{i}
    color: colors[i -1]
// 不思議な挙動になる
// => .color-1 { color: #00f #ff0; }
// => .color-2 { color: #ff0 #ff0; }
// => .color-3 { color: #ff0; }

2-3. [i- 1] 片方だけスペースがある場合２

colors = (red blue yellow)
for i in (1..3)
  .font-color-{i}
    color: colors[i- 1]
// 全て colors[0] の値になる
// => .color-1 { color: #00f; }
// => .color-2 { color: #00f; }
// => .color-3 { color: #00f; }

2-4. { }で囲む(変数展開する)とエラーになる
これは、1の配列の添字を変数展開させるとエラーになるのと同じ理由だと思う。

colors = (red blue yellow)
for i in (1..3)
  .font-color-{i}
    color: colors[{i - 1}]
// => ERROR expected ":", got "-"

添字内で計算式を使う時は [ i - 1 ] のように演算子の前後に必ずスペースが必要っぽいです。
[ (i - 1) ] 計算式を()で括っても、演算子の前後にスペースがないと正しく動作しませんでした。 正しく動作するパターン

colors = (red blue yellow)
for i in (1..3)
  .font-color-{i}
    color: colors[i - 1]
    // 又は
   color:  colors[(i - 1)]

配列のインデックスを動的に取得する方法

配列のインデックスを配列を利用して取得するにはrange()を使う

range(start, stop[, step])

range(1, 5)
// => 1 2 3 4 5
// ※ range(1, 5) は 1..5 と書くのと同じ

参考: Built-in Functions — Stylus

なので配列のインデックスを取得するには range( 0, (配列の長さ - 1) ) とすればOK

colors = (red blue yellow)
for i in range(0,(length(colors) - 1))
  .font-color-{i}
    color: colors[i]

　
jadeの仲間みたいなものだから、javascriptみたいな書き方でOKなんじゃないの〜って思い込んで書いてて結構ハマりました。

---

[参考]

• javascript - Does Stylus support arrays of variables? - Stack Overflow
• http://stylus-lang.com/
• Stylus入門したときのまとめ - Qiita

トータルフィットネス(TotalFitness) 鉄アレー 5kg STW005