Question

我对Jade / Pug相对较新，而且我在使用mixin时遇到了一些麻烦。我使用jade文档创建了以下内容，这在我使用Codekit进行编译时起作用。

密新

df['slices_low'] = df.slices.apply(fun)

df

实例

mixin svg(svg_file, svg_id, svg_class, svg_title)
  svg(class="#{svg_class}",aria-hidden='true', title="#{svg_title}")
    use(xlink:href="img/sprites/#{svg_file}##{svg_id}")

输出：

+svg("media.svg", "location", "sm", "My Location")

不幸的是，在其他地方，使用gulp任务或在Codepen上编译这些文件似乎没有相同的输出。我发现<svg class="sm" aria-hidden="true" title="My Location"> <use xlink:href="img/sprites/media.svg#location"></use> </svg>而非#{svg_file}之类的内容会让我感到满意。

在pug文档中，mixin attributes部分提供了以下示例：

media.svg

我的问题是，我如何使用该语法来堆叠我的变量用玉做的：

mixin link(href, name) a(href=href)&attributes(attributes)= name

最终：

#{svg_file}##{svg_id}

Answer 1

Pug支持Attribute Interpolation这种情况

在这种情况下，上面提到的mixin的语法可能是：

mixin svg(svg_file, svg_id, svg_class, svg_title)
  span.icon
    svg(class=svg_class, aria-hidden='true', title=svg_title)
      use(xlink:href= svg_file + '#' + svg_id)

用玉/哈巴狗堆叠变量

1 个答案: