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;
// }
其他內容
您可以使用其他正常的Stylus功能與哈希，例如 length()
foo = { bar: 'a', baz: 'b' }
length(foo)
// => 2
foo = { bar: 'a', baz: 'b' }
length(foo)
// => 2
您可以通過可選的key參數迭代哈希
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
您可以使用對應的BIF獲取哈希的鍵或值
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 BIF 從哈希中刪除鍵
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')"}