手写笔 - 哈希导致错误答案

【问题标题】：Stylus - Hash causing error手写笔 - 哈希导致错误
【发布时间】：2016-06-19 19:12:29
【问题描述】：

我正在尝试在 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|按钮样式 = 4| { the-font: 200 16px 'Helvetica Neue', Helvetica, Arial, 无衬线，5| the-border: 1px 纯品牌色，6|
边界半径：6px 7| } ------------^

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

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

【问题讨论】：

标签： css hash stylus

【解决方案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
        }
    }

【讨论】：

【解决方案2】：

好吧，你得到了错误，因为, 是哈希键值对的分隔符。您可以使用您的方法（使用字符串 + unquote 获取实际值），也可以使用 \ 转义逗号：

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

【讨论】：

是的，我最终也这样做了，谢谢。第一个括号也需要与“=”在同一行才能编译