Appearance
哈希值
¥Hashes
在 0.39.0
版本中,Stylus 获得了哈希对象。
¥In 0.39.0
version Stylus got hash objects.
定义
¥Define
你可以使用大括号和冒号来划分键和值来定义哈希:
¥You can define a hash using the curly braces and colons to divide the keys and values:
foo = {
bar: baz,
baz: raz
}
foo = {
bar: baz,
baz: raz
}
键应该是正确的标识或字符串:
¥the keys should be either proper idents or strings:
foo = {
bar: baz,
'baz': raz,
'0': raz
}
foo = {
bar: baz,
'baz': raz,
'0': raz
}
当你已经有了一个哈希值时,你可以使用括号和字符串来设置它的值:
¥When you already have a hash, you can set its values using brackets and strings inside:
foo = {}
foo['bar'] = baz
foo['baz'] = raz
foo = {}
foo['bar'] = baz
foo['baz'] = raz
请注意,虽然你不能在大括号定义中使用变量或插值,但可以在括号内使用变量:
¥Note that while you can't use variables or interpolations in curly braces defines, you can use variables inside brackets:
foo = {}
bar = 'baz'
foo[bar] = raz
foo.baz
// => raz
foo = {}
bar = 'baz'
foo[bar] = raz
foo.baz
// => raz
匿名哈希
¥Anonymous hash
我们可以为列表创建匿名哈希对象,这是一种没有变量名的对象。
¥We can create anonymous hash objects for list, a kind object with out variable name.
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 的语法。它也适用于迭代和条件语句。
¥To access its values, we can use both brackets syntax (['str']
) and dot syntax (.
). Brackets syntax works well for programming, meanwhile dot syntax is more readable and JSON-alike syntax. It works well with iteration and conditional statement as well.
获取器
¥Getters
要从哈希中检索值,你可以使用点作为标识:
¥For retrieving values from hashes you can use the dot for idents:
foo = { bar: "baz" }
foo.bar
// => "baz"
foo = { bar: "baz" }
foo.bar
// => "baz"
或者用括号括起任何内容的字符串:
¥Or brackets with strings for anything:
foo = { "%": 10 }
baz = "%"
foo[baz]
// => 10
foo = { "%": 10 }
baz = "%"
foo[baz]
// => 10
你可以使用任何你想要的组合:
¥You can use any combinations you want:
foo = {
bar: {
baz: {
raz: 10px
}
}
}
qux = "raz"
foo["bar"].baz[qux]
// => 10px
foo = {
bar: {
baz: {
raz: 10px
}
}
}
qux = "raz"
foo["bar"].baz[qux]
// => 10px
插值法
¥Interpolation
插值中使用的哈希值会将哈希值的内容输出为 CSS(尽管几乎没有任何 Stylus 功能):
¥Hashes used inside an interpolation would output the content of the hashes as CSS (without almost any Stylus features though):
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;
// }
其他的东西
¥Other stuff
你可以使用其他带有哈希值的普通 Stylus 内容,例如 length()
:
¥You can use other normal Stylus stuff with hashes, like length()
:
foo = { bar: 'a', baz: 'b' }
length(foo)
// => 2
foo = { bar: 'a', baz: 'b' }
length(foo)
// => 2
你可以使用可选的键参数迭代哈希值:
¥You can iterate through hashes with optional key param:
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
检查哈希中密钥是否存在:
¥You can check existence of a key in hash using in
:
foo = { bar: 10px}
bar in foo
// => true
baz in foo
// => false
foo = { bar: 10px}
bar in foo
// => true
baz in foo
// => false
你可以使用相应的 bif 获取哈希的键或值:
¥You can get keys or values of the hash using corresponding bifs:
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 从哈希中删除密钥:
¥You can remove a key from the hash using remove
bif:
obj = { foo: 1, bar: 2 }
remove(obj, 'foo')
// => {"bar":"(2)"}
obj = { foo: 1, bar: 2 }
remove(obj, 'foo')
// => {"bar":"(2)"}
你可以使用 merge
(别名为 extend
)来合并哈希值:
¥And you can use merge
(aliased as extend
) to merge hashes:
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')"}