跳到主要内容

哈希

0.39.0 版本中,Stylus 引入了哈希对象。

定义

你可以使用花括号和冒号来定义一个哈希:

foo = {
bar: baz,
baz: raz
}

键应该是合适的标识符或字符串:

foo = {
bar: baz,
'baz': raz,
'0': raz
}

当你已经有一个哈希时,你可以使用方括号和字符串来设置它的值:

foo = {}
foo['bar'] = baz
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

要访问它的值,我们可以使用方括号语法(['str'])和点语法(.)。方括号语法适用于编程,而点语法更易读且类似于 JSON 语法。它也适用于迭代和条件语句。

获取器

要从哈希中检索值,你可以使用标识符的点:

foo = { bar: "baz" }

foo.bar
// => "baz"

或者使用字符串的方括号:

foo = { "%": 10 }
baz = "%"

foo[baz]
// => 10

你可以使用任何组合:

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;
// }

其他内容

你可以像使用普通的 Stylus 一样使用哈希,比如 length()

foo = { bar: 'a', baz: 'b' }

length(foo)
// => 2

你可以通过可选的键参数遍历哈希:

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: 'a', baz: 'b' }

keys(foo)
// => 'bar' 'baz'

values(foo)
// => 'a' 'b'

你可以使用 remove 函数从哈希表中删除一个键:

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