関数
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 であるかどうかを確認します。未定義の識別子は値を自分自身として生成するため、以下に示すように(true
と false
の代わりに yes
と no
が使用されている)、自分自身と比較できます。
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
注:yes
と no
はブールリテラルではありません。この場合、単に未定義の識別子です。
別の例
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