コンテンツにスキップ
トップに戻る

関数

Stylus は、言語内で強力な関数定義機能を提供します。関数定義は mixin と同じように見えますが、関数は値を返すことができます。

戻り値

簡単な例として、2 つの数値を加算する関数を作成してみましょう。

add(a, b)
  a + b
add(a, b)
  a + b

この関数は、条件式やプロパティの値などで使用できます。

body 
  padding add(10px, 5)
body 
  padding add(10px, 5)

レンダリング

body {
  padding: 15px;
}
body {
  padding: 15px;
}

引数のデフォルト値

オプションの引数には、指定された式をデフォルト値として設定できます。Stylus では、前の引数をデフォルト値にすることもできます!

例:

add(a, b = a)
  a + b

add(10, 5)
// => 15

add(10)
// => 20
add(a, b = a)
  a + b

add(10, 5)
// => 15

add(10)
// => 20

注: 引数のデフォルト値は代入であるため、デフォルト値に関数呼び出しを使用することもできます。

add(a, b = unit(a, px))
  a + b
add(a, b = unit(a, px))
  a + b

名前付きパラメータ

関数は名前付きパラメータを受け入れます。これにより、パラメータの順序を覚える必要がなくなり、コードの可読性が向上します。

例:

subtract(a, b)
  a - b

subtract(b: 10, a: 25)
subtract(a, b)
  a - b

subtract(b: 10, a: 25)

関数本体

単純な add() 関数をさらに発展させることができます。unit() 組み込み関数を使用して、渡されたすべての単位を px にキャストしてみましょう。これにより、各引数が再代入され、単位変換を無視する単位型文字列(または識別子)が提供されます。

add(a, b = a)
  a = unit(a, px)
  b = unit(b, px)
  a + b

add(15%, 10deg)
// => 25
add(a, b = a)
  a = unit(a, px)
  b = unit(b, px)
  a + b

add(15%, 10deg)
// => 25

複数の戻り値

Stylus 関数は、変数に複数の値を代入できるのと同様に、複数の値を返すことができます。

たとえば、次の代入は有効です。

sizes = 15px 10px

sizes[0]
// => 15px 
sizes = 15px 10px

sizes[0]
// => 15px 

同様に、複数の値を返すことができます。

sizes()
  15px 10px

sizes()[0]
// => 15px
sizes()
  15px 10px

sizes()[0]
// => 15px

1 つのわずかな例外は、戻り値が識別子の場合です。たとえば、以下は Stylus へのプロパティ代入のように見えます(演算子が存在しないため)。

swap(a, b)
  b a
swap(a, b)
  b a

これを明確にするために、括弧で囲むか、return キーワードを使用できます。

swap(a, b)
  (b a)

swap(a, b)
  return b a
swap(a, b)
  (b a)

swap(a, b)
  return b a

条件式

引数を文字列に変換できるかどうかを判断する stringish() という関数を作成するとします。val が文字列または(文字列のような)ident であるかどうかを確認します。未定義の識別子は値を自分自身として生成するため、以下に示すように(truefalse の代わりに yesno が使用されている)、自分自身と比較できます。

stringish(val)
  if val is a 'string' or val is a 'ident'
    yes
  else
    no
stringish(val)
  if val is a 'string' or val is a 'ident'
    yes
  else
    no

使用例

stringish('yay') == yes
// => true

stringish(yay) == yes
// => true

stringish(0) == no
// => true
stringish('yay') == yes
// => true

stringish(yay) == yes
// => true

stringish(0) == no
// => true

yesno はブールリテラルではありません。この場合、単に未定義の識別子です。

別の例

compare(a, b)
  if a > b
    higher
  else if a < b
    lower
  else
    equal
compare(a, b)
  if a > b
    higher
  else if a < b
    lower
  else
    equal

使用例

compare(5, 2)
// => higher

compare(1, 5)
// => lower

compare(10, 10)
// => equal
compare(5, 2)
// => higher

compare(1, 5)
// => lower

compare(10, 10)
// => equal

エイリアス

関数のエイリアスを設定するには、単純に関数の名前を新しい識別子に代入します。たとえば、add() 関数は、次のように plus() というエイリアスにできます。

plus = add

plus(1, 2)
// => 3
plus = add

plus(1, 2)
// => 3

可変関数

関数を「エイリアス」できるのと同じように、関数を渡すこともできます。ここでは、invoke() 関数が関数を受け入れるため、add() または sub() を渡すことができます。

add(a, b)
  a + b

sub(a, b)
  a - b

invoke(a, b, fn)
  fn(a, b)

body
  padding invoke(5, 10, add)
  padding invoke(5, 10, sub)
add(a, b)
  a + b

sub(a, b)
  a - b

invoke(a, b, fn)
  fn(a, b)

body
  padding invoke(5, 10, add)
  padding invoke(5, 10, sub)

生成

body {
  padding: 15;
  padding: -5;
}
body {
  padding: 15;
  padding: -5;
}

匿名関数

@(){} 構文を使用して、必要な場所で匿名関数を使用できます。以下は、カスタムの sort() 関数を作成するために使用する方法です。

sort(list, fn = null)
  // default sort function
  if fn == null
    fn = @(a, b) {
      a > b
    }

  // bubble sort
  for $i in 1..length(list) - 1
    for $j in 0..$i - 1
      if fn(list[$j], list[$i])
        $temp = list[$i]
        list[$i] = list[$j]
        list[$j] = $temp
  return list

  sort('e' 'c' 'f' 'a' 'b' 'd')
  // => 'a' 'b' 'c' 'd' 'e' 'f'

  sort(5 3 6 1 2 4, @(a, b){
    a < b
  })
  // => 6 5 4 3 2 1
sort(list, fn = null)
  // default sort function
  if fn == null
    fn = @(a, b) {
      a > b
    }

  // bubble sort
  for $i in 1..length(list) - 1
    for $j in 0..$i - 1
      if fn(list[$j], list[$i])
        $temp = list[$i]
        list[$i] = list[$j]
        list[$j] = $temp
  return list

  sort('e' 'c' 'f' 'a' 'b' 'd')
  // => 'a' 'b' 'c' 'd' 'e' 'f'

  sort(5 3 6 1 2 4, @(a, b){
    a < b
  })
  // => 6 5 4 3 2 1

arguments

arguments ローカル変数はすべての関数本体で利用可能で、渡されたすべての引数が含まれています。

例:

sum()
  n = 0
  for num in arguments
    n = n + num

sum(1,2,3,4,5)
// => 15
sum()
  n = 0
  for num in arguments
    n = n + num

sum(1,2,3,4,5)
// => 15

ハッシュの例

以下では、get(hash, key) 関数を定義します。これは、key の値(または null)を返します。hash 内の各 pair を反復処理し、最初のノード(key)が一致する場合に、ペアの 2 番目のノードを返します。

get(hash, key)
  return pair[1] if pair[0] == key for pair in hash
get(hash, key)
  return pair[1] if pair[0] == key for pair in hash

以下に示すように、言語内の関数は、強力な Stylus 式と組み合わせることで、優れた柔軟性を提供できます。

hash = (one 1) (two 2) (three 3)

get(hash, two)
// => 2

get(hash, three)
// => 3

get(hash, something)
// => null
hash = (one 1) (two 2) (three 3)

get(hash, two)
// => 2

get(hash, three)
// => 3

get(hash, something)
// => null