繰り返し

Stylusでは、for/in構文を使用して式を繰り返し処理できます。形式は以下のようになります。

for <val-name> [, <key-name>] in <expression>

for <val-name> [, <key-name>] in <expression>

例

body
  for num in 1 2 3
    foo num

body
  for num in 1 2 3
    foo num

出力結果

body {
  foo: 1;
  foo: 2;
  foo: 3;
}

body {
  foo: 1;
  foo: 2;
  foo: 3;
}

以下の例は、<key-name>の使用方法を示しています。

body
  fonts = Impact Arial sans-serif
  for font, i in fonts
    foo i font

body
  fonts = Impact Arial sans-serif
  for font, i in fonts
    foo i font

出力結果

body {
  foo: 0 Impact;
  foo: 1 Arial;
  foo: 2 sans-serif;
}

body {
  foo: 0 Impact;
  foo: 1 Arial;
  foo: 2 sans-serif;
}

通常のforループの方法は次のとおりです。

body
  for num in (1..5)
    foo num

body
  for num in (1..5)
    foo num

出力結果

body {
  foo: 1;
  foo: 2;
  foo: 3;
  foo: 4;
  foo: 5;
}

body {
  foo: 1;
  foo: 2;
  foo: 3;
  foo: 4;
  foo: 5;
}

文字列での使用

for num in (1..10)
  .box{num}
    animation: box + num 5s infinite
  
  @keframes box{num}
    0%   { left: 0px }
    100% { left: (num * 30px) }

for num in (1..10)
  .box{num}
    animation: box + num 5s infinite
  
  @keframes box{num}
    0%   { left: 0px }
    100% { left: (num * 30px) }

ミックスイン

ミックスイン内で繰り返し処理を使用して、強力な機能を作成できます。たとえば、補間と繰り返し処理を使用して、式ペアをプロパティとして適用できます。

以下では、apply()を定義し、コンマ区切りリストと式リストの両方をサポートするために、すべてのargumentsを条件付きで使用しています。

apply(props)
  props = arguments if length(arguments) > 1
  for prop in props
    {prop[0]} prop[1]

body
  apply(one 1, two 2, three 3)

body
  list = (one 1) (two 2) (three 3)
  apply(list)

apply(props)
  props = arguments if length(arguments) > 1
  for prop in props
    {prop[0]} prop[1]

body
  apply(one 1, two 2, three 3)

body
  list = (one 1) (two 2) (three 3)
  apply(list)

関数

Stylus関数にはforループを含めることもできます。以下に、いくつかの使用例を示します。

合計

sum(nums)
  sum = 0
  for n in nums
    sum += n

sum(1 2 3)
// => 6

sum(nums)
  sum = 0
  for n in nums
    sum += n

sum(1 2 3)
// => 6

結合

join(delim, args)
  buf = ''
  for arg, index in args
    if index
      buf += delim + arg
    else
      buf += arg

join(', ', foo bar baz)
// => "foo, bar, baz"

join(delim, args)
  buf = ''
  for arg, index in args
    if index
      buf += delim + arg
    else
      buf += arg

join(', ', foo bar baz)
// => "foo, bar, baz"

後置記法

if / unlessをステートメントの後に使用できるのと同様に、forも同様に使用できます。以下は、上記と同じ例を後置記法を使用して記述したものです。

sum(nums)
  sum = 0
  sum += n for n in nums


join(delim, args)
  buf = ''
  buf += i ? delim + arg : arg for arg, i in args

sum(nums)
  sum = 0
  sum += n for n in nums


join(delim, args)
  buf = ''
  buf += i ? delim + arg : arg for arg, i in args

ループ内からreturnすることもできます。以下は、n % 2 == 0がtrueと評価されたときに数値を返す例です。

first-even(nums)
  return n if n % 2 == 0 for n in nums

first-even(1 3 5 5 6 3 2)
// => 6

first-even(nums)
  return n if n % 2 == 0 for n in nums

first-even(1 3 5 5 6 3 2)
// => 6

繰り返し #

ミックスイン #

関数 #

後置記法 #

繰り返し

ミックスイン

関数

後置記法