Jade (node.js) - 一个元素上可以有多个class吗？

Question

Jade中可以写成：

div.container

它会被编译为：

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

但是如果你有多个类似于这样的类：

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

我写的代码是这样的:

div(class="span 4")

但是我在想：在jade中难道没有更好的方法吗？

- Piddien

Answer 1

根据文档：

how about some classes?

div.user-details

renders <div class="user-details"></div>

multiple classes? and an id? sure:

div#foo.bar.baz

renders <div id="foo" class="bar baz"></div>

- Matt Ball

---

这对我不起作用（pug的2.0.4版本）。它首先添加类，最后附加ID。div#foo.bar.baz将生成<div class="bar baz" id="foo"></div>。 - ovidiu-miu

@ovidiu-miu 看起来对我来说完全没问题。属性的顺序并不重要，所以都一样。 - Matt Ball

你是正确的。我被CSS的应用顺序误导了。 - ovidiu-miu

Answer 2

以下是格式：

    div#MyBox.span12.blueButton.moveLeft

将创建

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

- gartox

Answer 3

你不需要指定div。

#MyBox.span12.blueButton.moveLeft     

将选定的类和id应用于

元素：

由于

是如此常见的标签选择，如果您省略标签名称，则默认为

： .content编译为<div class="content"></div>

请参阅Pug（Jade的新名称）文档。

但是，您必须指定每个使用id或class的其他元素的标记。

例如：

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

- PhilippeThomas

Answer 4

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

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

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

class 属性还支持数组和对象，以满足更高级的使用情况。

从 Class Attributes section in the documentation（稍作修改以提高清晰度）中得知：

The class attribute can be a string, like any normal attribute; but it can also be an array of class names, which is handy when generated from JavaScript.

Input:

- const classes = ['foo', 'bar', 'baz']

a(class=classes)

//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])

Output:

<a class="foo bar baz"></a>
<a class="bang foo bar baz bing"></a>

It can also be an object which maps class names to true or false values. This is useful for applying conditional classes.

Input:

- const currentUrl = '/about'

a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About

Output:

<a href="/">Home</a>
<a class="active" href="/about">About</a>

- Matias Kinnunen