手写笔 - 导致错误的哈希

Question

我正在尝试使用手写笔中的哈希来对按钮的所有属性进行分组。这是哈希：

global_constants.风格：

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]

我收到此错误：

解析错误：触笔/global_constants.样式：7：6 3| 按钮样式 = 4| { the-font： 200 16px 'Helvetica Neue'， Helvetica， Arial， 无衬线，5| 边框：1px 纯色品牌颜色，6|
边框半径：6px 7| } -----------^

赋值中的右侧操作数无效，"缩进"

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

Answer 1

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

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

Answer 2

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

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
        }
    }