哈希
在 Stylus 的0.39.0版添加了对哈希的支持
定义
你可以使用大括号和逗号将键和值定义一个哈希对象:
1 2 3 4
| foo = { bar: baz, baz: raz }
|
Key值应该是合法的标识或字符串:
1 2 3 4 5
| foo = { bar: baz, 'baz': raz, '0': raz }
|
当你已经有hash后,你就可以使用括号和字符串来设置它的值:
1 2 3
| foo = {} foo['bar'] = baz foo['baz'] = raz
|
注意,你不能使用变量或插值在大括号定义,你可以在括号中使用变量:
1 2 3 4 5 6
| foo = {} bar = 'baz' foo[bar] = raz
foo.baz // => raz
|
取值
为了从哈希值中检索值,您可以使用点进行连接:
1 2 3 4
| foo = { bar: "baz" }
foo.bar // => "baz"
|
或者使用中括号
1 2 3 4 5
| foo = { "%": 10 } baz = "%"
foo[baz] // => 10
|
你也可使用点 和 中括号的组合
1 2 3 4 5 6 7 8 9 10 11
| foo = { bar: { baz: { raz: 10px } } }
qux = "raz" foo["bar"].baz[qux] // => 10px
|
插值
哈希内插值用于将哈希值的内容输出为CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| foo = { width: 10px, height: 20px, '&:hover': { padding: 0
} }
.bar {foo}
// => .bar { // width: 10px; // height: 20px; // } // .bar:hover { // padding: 0; // }
|
其他
你可以使用其他的方法运用在哈希上,比如说 length()
1 2 3 4
| foo = { bar: 'a', baz: 'b' }
length(foo) // => 2
|
你也可以遍历哈希与其键值:
1 2 3 4 5 6 7
| foo = { width: 10px, height: 20px }
for key, value in foo {key}: value
// => width: 10px; // height: 20px;
|
你也可以检查哈希值里是否有相应的键值
1 2 3 4 5 6 7
| foo = { bar: 10px}
bar in foo // => true
baz in foo // => false
|
你能通过相应的方法获取哈希值的键或值
1 2 3 4 5 6 7
| foo = { bar: 'a', baz: 'b' }
keys(foo) // => 'bar' 'baz'
values(foo) // => 'a' 'b'
|
你也可以使用相应的方法删除键值
1 2 3
| obj = { foo: 1, bar: 2 } remove(obj, 'foo') // => {"bar":"(2)"}
|
你能使用 merge (aliased as extend)合并哈希值:
1 2 3 4 5 6 7 8 9 10 11
| obj = { foo: 'foo' bar: 'bar' }
obj2 = { baz: 'baz' }
merge(obj, obj2) // => {"foo":"('foo')","bar":"('bar')","baz":"('baz')"}
|