PugsJs为mixin添加了额外的类

Question

如何向已经有类的mixin添加一些额外的类。这是我的代码，我正在尝试添加第三个参数，但它不起作用。

mixin item(title, url, extraClasses)
mixin linkA
a.nav-link(href=url)= title
li.nav-item.mr-auto.#{extraClasses}(class=title === activeMenu ? 'active' : '')
+linkA
ul.navbar-nav.ml-auto
each val in ['Menu1', 'Menu2', 'Menu3', 'Menu4']
if val !=='Menu1'      
+item(val, href='/' + val.toLowerCase() + '.html', 'test1')
else
+item(val, href='/' + val.toLowerCase() + '.html', 'test2')

查看以下内容：https://codepen.io/Bizboss/pen/zYYwoZP?editors=1011

Answer 1

您可以使用&attributesmixin语法轻松地将其他类传递给mixin中的元素。

这里有一个简化的例子：

mixin item(title, url, isActive)
li(class= isActive ? 'active' : '')&attributes(attributes)
a(href= url) #{title}
ul
+item('Home', '/', true).myClass
+item('About', '/about', false)
+item('Contact', '/contact', false).foo.bar

这将呈现：

<ul>
<li class="active myClass">
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li class="foo bar">
<a href="/contact">Contact</a>
</li>
</ul>