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 | {--font：200 16px'Helvetica Neue'，Helvetica，Arial，     sans-serif，5 |边框：1px坚固的品牌颜色，6 |
    the-border-radius：6px 7 | }     ----------- ^


分配中的右侧操作数无效，得到“突出”

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

Answer 1

我必须更改缩进以包含与＆＃34; =＆＃34;在同一行的左括号，并且还在字体中转义我的逗号，如下所示：

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

嗯，您收到错误，因为,是散列键值对的分隔符。您可以使用您的方法（使用字符串+ unquote获取真实值），或者您可以使用\转义逗号：

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

手写笔 - 哈希导致错误

2 个答案: