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

我不得不更改缩进以包含与“=”在同一行的左括号，并且还转义字体中的逗号，如下所示：

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,
        height: 64px,
        '&:hover': {
            background-color: #ff8282
        }
    }

Answer 2

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

转义逗号

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

Stylus - 散列导致错误

Stylus - Hash causing error

css

hash