美文网首页
Stylus预处理器简介(十一)哈希

Stylus预处理器简介(十一)哈希

作者: 曲昶光 | 来源:发表于2021-07-26 06:01 被阅读0次

    哈希(HASHES)

    Stylus 在 0.39.0 版本中增加了对哈希对象的支持。

    定义

    可以使用大括号来定义哈希对象并用冒号来区分键和值:

    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
    
    

    取值

    利用点操作符加标识符的方式可以从哈希对象中获取值:

    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
    
    

    你可以遍历哈希对象,key 参数是可选的:

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

    相关文章

      网友评论

          本文标题:Stylus预处理器简介(十一)哈希

          本文链接:https://www.haomeiwen.com/subject/mfzlmltx.html