Question

我想在Jade中创建一个按钮mixin。但是我不知道哪些html元素我将应用那些mixin，例如a，按钮或输入。

我的问题：是否可以从mixin中选择元素？例如这样称呼它 a +按钮或输入+按钮

或使用元素参数插入带有mixin的元素

mixin button(element, style, size, expand, fill, round, simple)
    - var style = (typeof href === 'undefined') ? '' : style
    - var fill = (typeof fill === 'undefined') ? '' : 'btn-fill'
    - var expand = (typeof expand === 'undefined') ? '' : 'btn-block'
    - var round = (typeof round === 'undefined') ? '' : 'btn-round'
    - var simple = (typeof simple === 'undefined') ? '' : 'btn-simple'
    case size
        when "large"
            - size = "btn-lg"
        when "small"
            - size = "btn-sm"
        when "mini"
            - size = "btn-xs"
    element(href=href, role='button',class=["btn", "btn-" + style, size, fill, expand, round, simple])&attributes(attributes)
        block

问候

Answer 1

自己找到：

#{element} solves the problem

Answer 2

我正在做一个SVG mixin，并尝试通过包括像：

mixin svg(icon)
 case icon
    when "address"
      include ../../assets/final/svg/addaddress.svg
     when "billing"
       include ../../assets/final/svg/billing.svg

它没有成功。

然后尝试了这个：

mixin svgaddress
 include ../../assets/final/svg/date.svg 

mixin svgbilling
 include ../../assets/final/svg/delete.svg 

mixin svg(icon)
 case icon
    when "address"
       +svgaddress
     when "billing"
       +svgbilling

我知道我实际上可以通过mixins直接添加图标，但出于语法目的，我更喜欢：

+svg('address')

我制作了一个非常类似于你的，但更多的是一个简单的按钮，还有svg：

 mixin abutton(desc,href,icon,classe)
   a(href="#{href}",class="#{classe}") 
     case icon
       when "address"
         +svgaddress

      span #{desc}

输入

+abutton('myaccount','account.html','address','button outline grey')

玉石混合中的动态元素

2 个答案: