代码之家 › 专栏 › 技术社区 › BeniaminoBaggins

触笔-哈希导致错误

stylus hash css

BeniaminoBaggins · 技术社区 · 9 年前

我正在尝试使用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]

我得到这个错误:

分析错误:手写笔/全局常量。styl:7:6 3|按钮样式=4|{字体:200 16px“Helvetica Neue”,Helvetic,Arial, 无衬线,5|边框:1px纯色品牌,6|
边框半径:6px7|} -----------^

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

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

2 回复 | 直到 9 年前

Panya 9 年前

你得到错误是因为 , 是哈希的键值对的分隔符。您可以使用您的方法(使用字符串+ unquote 获取实际值),或者可以用 \ :

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

BeniaminoBaggins 9 年前

我必须更改缩进,使其包含与“=”同一行的左括号,并在字体中转义逗号,如下所示:

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

推荐文章

Miguel Morera · 在触针混音器中串联变量

7 年前

amp123 · 将ejs参数传递到触控笔文件

7 年前

fox · 在HTML容器中均匀分布任意数量的元素

7 年前

BeniaminoBaggins · 触笔-哈希导致错误

9 年前

Sim Sca · 触控笔通过循环创建混音

9 年前

Eric Sartorius · 悬停旋转时不需要的CSS多边形边框

9 年前

TheLazyChap · Gulp相关任务无法正常工作

9 年前

user1429980 · 如何在Stylus中生成占位符

10 年前

Ser-Gen · 如何生成与变量值同名的混合?

10 年前

Nano · Stylus给了我一个预期的“缩进”,得到了“突出”,但我不知道为什么

10 年前