css - Stylus - 散列导致错误

Question

我正在尝试在 Stylus 中使用散列来对我的按钮的所有属性进行分组。这是哈希:

global_constants.styl:

brand-colour = #FC4747
button-hover-colour = #ff8282
button-style = 
    {   font: 200 16px 'Helvetica Neue', Helvetica, Arial, sans-serif,
        border: 1px solid brand-colour,
        border-radius: 6px,
        '&:hover': {
            background-color: #ff8282
        }
    }

和客户端(override_multiselect.styl):

@require "global_constants"

button.multiselect 
    {button-style}

ul.multiselect-container 
    width 100%

span.multiselect-selected-text
    color brand-colour
    text-transform uppercase
    font button-style[font]

我收到这个错误:

ParseError: stylus/global_constants.styl:7:6 3| button-style = 4| { the-font: 200 16px 'Helvetica Neue', Helvetica, Arial, sans-serif, 5| the-border: 1px solid brand-colour, 6|
the-border-radius: 6px 7| } -----------^

赋值中的右侧操作数无效，得到“outdent”

如何消除错误并将所有 button-style 样式应用于 button.multiselect 并应用 button-style[font] 到 span.multiselect-selected-text?

Answer 1

好吧，您会收到错误消息，因为 , 是散列键值对的分隔符。您可以使用您的方法(使用 string + unquote 获取实际值)，或者您可以使用 \:

转义逗号

font: 200 16px 'Helvetica Neue'\, Helvetica\, Arial\, sans-serif,