Question

私は比較的翡翠/ Pugに慣れていて、mixinにいくつか問題がありました。 jadeのドキュメンテーションを使って以下を作成しました。これはCodekitでコンパイルするときに動作します。

MIXIN：

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> 

他の場所でファイルを援助したり、麻薬の仕事をしたり、Codepenで同じ出力を持っていないようです。私はの代わりにmedia.svgのようなものを見ています。パグドキュメントで

mixin attributesセクションには、次のサンプルを提供します。

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

私の質問は、どのように私は私 ように私の変数をスタックすること構文を使用しているヒスイで行った：

#{svg_file}##{svg_id}

最終的には：

media.svg#location

Answer 1

パグは状況

上記のミックスインの構文をこのタイプのAttribute Interpolationをサポートし、この場合には、次のようになります。

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)