Stylusハッシュ
0.39.0 バージョンから、Stylus はハッシュオブジェクトに対応しました。
定義
中括弧とコロンを使用して、キーと値を区切ることでハッシュを定義できます。
foo = {
bar: baz,
baz: raz
}
foo = {
bar: baz,
baz: raz
}
キーは、適切な識別子または文字列である必要があります。
foo = {
bar: baz,
'baz': raz,
'0': raz
}
foo = {
bar: baz,
'baz': raz,
'0': raz
}
既にハッシュがある場合は、角括弧と内部の文字列を使用して値を設定できます。
foo = {}
foo['bar'] = baz
foo['baz'] = raz
foo = {}
foo['bar'] = baz
foo['baz'] = raz
中括弧を使用した定義では変数や補間を使用できませんが、角括弧内では変数を使用できます。
foo = {}
bar = 'baz'
foo[bar] = raz
foo.baz
// => raz
foo = {}
bar = 'baz'
foo[bar] = raz
foo.baz
// => raz
匿名ハッシュ
変数名のない、リストのようなオブジェクトである匿名ハッシュオブジェクトを作成できます。
list = foo {int: 1, str: '1'} {node: a-node, color: #32E}
list[0]
// => foo
type(list[0])
// => 'ident'
type(list[1])
// => 'object'
list[1].int
// => 1
list[2].color
// => #32E
list = foo {int: 1, str: '1'} {node: a-node, color: #32E}
list[0]
// => foo
type(list[0])
// => 'ident'
type(list[1])
// => 'object'
list[1].int
// => 1
list[2].color
// => #32E
値にアクセスするには、角括弧構文（`['str']`）とドット構文（`.`）の両方を使用できます。角括弧構文はプログラミングに適していますが、ドット構文の方が読みやすく、JSONライクな構文です。繰り返し処理や条件文でもうまく機能します。
ゲッター
ハッシュから値を取得するには、識別子にはドットを使用できます。
foo = { bar: "baz" }
foo.bar
// => "baz"
foo = { bar: "baz" }
foo.bar
// => "baz"
または、何でも文字列で角括弧を使用します。
foo = { "%": 10 }
baz = "%"
foo[baz]
// => 10
foo = { "%": 10 }
baz = "%"
foo[baz]
// => 10
任意の組み合わせを使用できます。
foo = {
bar: {
baz: {
raz: 10px
}
}
}
qux = "raz"
foo["bar"].baz[qux]
// => 10px
foo = {
bar: {
baz: {
raz: 10px
}
}
}
qux = "raz"
foo["bar"].baz[qux]
// => 10px
補間
補間で使用されるハッシュは、CSSとしてハッシュの内容を出力します（ただし、ほとんどのStylus機能は使用されません）。
foo = {
width: 10px,
height: 20px,
'&:hover': {
padding: 0
}
}
.bar
{foo}
// => .bar {
// width: 10px;
// height: 20px;
// }
// .bar:hover {
// padding: 0;
// }
foo = {
width: 10px,
height: 20px,
'&:hover': {
padding: 0
}
}
.bar
{foo}
// => .bar {
// width: 10px;
// height: 20px;
// }
// .bar:hover {
// padding: 0;
// }
その他
ハッシュでは、`length()` のような通常の Stylus の機能を使用できます。
foo = { bar: 'a', baz: 'b' }
length(foo)
// => 2
foo = { bar: 'a', baz: 'b' }
length(foo)
// => 2
オプションのキーパラメータを使用して、ハッシュを反復処理できます。
foo = { width: 10px, height: 20px }
for key, value in foo
{key}: value
// => width: 10px;
// height: 20px;
foo = { width: 10px, height: 20px }
for key, value in foo
{key}: value
// => width: 10px;
// height: 20px;
`in` を使用して、ハッシュにキーが存在するかどうかを確認できます。
foo = { bar: 10px}
bar in foo
// => true
baz in foo
// => false
foo = { bar: 10px}
bar in foo
// => true
baz in foo
// => false
対応する組み込み関数を使用して、ハッシュのキーまたは値を取得できます。
foo = { bar: 'a', baz: 'b' }
keys(foo)
// => 'bar' 'baz'
values(foo)
// => 'a' 'b'
foo = { bar: 'a', baz: 'b' }
keys(foo)
// => 'bar' 'baz'
values(foo)
// => 'a' 'b'
`remove` 組み込み関数を使用して、ハッシュからキーを削除できます。
obj = { foo: 1, bar: 2 }
remove(obj, 'foo')
// => {"bar":"(2)"}
obj = { foo: 1, bar: 2 }
remove(obj, 'foo')
// => {"bar":"(2)"}
`merge`（`extend` のエイリアス）を使用して、ハッシュをマージできます。
obj = {
foo: 'foo'
bar: 'bar'
}
obj2 = {
baz: 'baz'
}
merge(obj, obj2)
// => {"foo":"('foo')","bar":"('bar')","baz":"('baz')"}
obj = {
foo: 'foo'
bar: 'bar'
}
obj2 = {
baz: 'baz'
}
merge(obj, obj2)
// => {"foo":"('foo')","bar":"('bar')","baz":"('baz')"}