哈希
在 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')"}
|