Jade (node.js) - 一个元素上有多个类？答案

【问题标题】：Jade (node.js) - more than one class on an element?Jade (node.js) - 一个元素上有多个类？
【发布时间】：2012-03-17 14:28:49
【问题描述】：

玉可以写：

div.container

它编译成：

<div class="container"></div>

但是如果你有几个类，比如：

<div class="span 4"><div>

我是这样写的：

div(class="span 4")

但我在想：玉石有没有更好的办法？

【问题讨论】：

标签： pug

【解决方案1】：

来自the documentation：

一些课程怎么样？
div.user-details
渲染<div class="user-details"></div>

多个班级？和身份证？确定：
div#foo.bar.baz
渲染<div id="foo" class="bar baz"></div>

【讨论】：

这对我不起作用（哈巴狗的 2.0.4 版本）。它首先添加类，最后添加 id。 div#foo.bar.baz 将生成
.
@ovidiu-miu 看起来对我来说效果很好。属性的顺序无所谓，都是一样的。
你是对的。我被css的应用顺序误导了。

【解决方案2】：

以下格式

    div#MyBox.span12.blueButton.moveLeft

将创造

    <div id="MyBox" class="span12 blueButton moveLeft"></div>

【讨论】：

【解决方案3】：

您不必指定div

#MyBox.span12.blueButton.moveLeft

将在 div 元素上应用选定的类和 id：

由于 div 是一种常见的标签选择，如果你省略标签名称： .content 编译为 <div class="content"></div>

见哈巴狗（Jade 的新名称）documentation。

但是，您必须指定您使用的每个其他元素的标签带有 id 或类。

例如

body
  #page
    header.row
      h1= title
    .row
      p Express App

【讨论】：

【解决方案4】：

请注意，您可以将.classname 语法与class 属性结合使用：

// Input:
.foo.bar(class="baz qux")

// Output:
<div class="foo bar baz qux"></div>

并且class 属性还支持数组和对象以用于更高级的用例。

来自Class Attributes section in the documentation（为清楚起见略有修改）：

class 属性可以是字符串，像任何普通属性一样；但它也可以是一个类名数组，从 JavaScript 生成时很方便。

输入：
- const classes = ['foo', 'bar', 'baz']

a(class=classes)

//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])
输出：
<a class="foo bar baz"></a>
<a class="bang foo bar baz bing"></a>
它也可以是一个将类名映射到true 或false 值的对象。这对于应用条件类很有用。

输入：
- const currentUrl = '/about'

a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
输出：
<a href="/">Home</a>
<a class="active" href="/about">About</a>

【讨论】：