通过属性 mixin 的内联样式答案

【问题标题】：Inline style via attribute mixin jade通过属性 mixin 的内联样式
【发布时间】：2014-09-15 15:13:09
【问题描述】：

有没有办法通过 Jade 中的 mixin 属性声明 CSS 宽度内联？下面是我尝试过的一个示例...

mixin button(buttonLink, buttonText, buttonWidth)
 +link(buttonLink)(style='width:"buttonWidth"')
  font(style='color: #ffffff; text-decoration: none;') 
   =buttonText

谢谢。

【问题讨论】：

标签： html css node.js pug

【解决方案1】：

是的，有可能;)

   mixin button(buttonLink, buttonText, buttonWidth)
     +link(buttonLink)(style="width:#{buttonWidth}")
       font(style='color: #ffffff; text-decoration: none;') 
         =buttonText

    mixin link(buttonLink)
      a(src=buttonLink, style=attributes.style)
        block

    +button("http://github.com", "github", 10)

顺便说一句：不要使用<font>
https://developer.mozilla.org/de/docs/Web/HTML/Element/font

【讨论】：

太棒了，谢谢！并且只使用字体标签，因为 Lotus 注释没有遵循链接上设置的 CSS（这是一封 HTML 电子邮件，应该在问题中提到！）。设置字体标签的样式似乎可以解决它。感谢您的帮助！

【解决方案2】：

有点晚了，但这也有效！

mixin button(buttonLink, buttonText, buttonWidth)
  +link(buttonLink)(style='width:"'+buttonWidth+'"')
    font(style='color: #ffffff; text-decoration: none;') 
      =buttonText

【讨论】：