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

你可以使用可选的键参数遍历哈希

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