用玉/哈巴狗堆叠变量答案

【问题标题】：Stacking variables with jade / pug用玉/哈巴狗堆叠变量
【发布时间】：2017-01-03 23:50:24
【问题描述】：

我对 Jade / Pug 比较陌生，而且我在使用 mixin 时遇到了一些麻烦。我使用翡翠文档创建了以下内容，当我使用 Codekit 编译时可以使用。

混音：

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")

输出：

<svg class="sm" aria-hidden="true" title="My Location">
  <use xlink:href="img/sprites/media.svg#location"></use>
</svg>

不幸的是，在其他地方使用 gulp 任务或在 Codepen 上编译这些文件似乎没有相同的输出。我看到像#{svg_file} 这样的东西，而不是我希望通过的media.svg。

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

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

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

#{svg_file}##{svg_id}

结束于：

media.svg#location

【问题讨论】：

标签： pug

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

【讨论】：