Question

在玉中，人们可以写：

div.container

并编译成：

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

但是，如果您有几个类，如果：

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

我写得像这样：

div(class="span 4")

但我在想：在玉器中没有更好的方法吗？

Answer 1

来自the documentation：

某些课怎么样？
div.user-details
呈现<div class="user-details"></div>

多个班级？和一个身份证？肯定的是：
div#foo.bar.baz
呈现<div id="foo" class="bar baz"></div>

Answer 2

以下格式

    div#MyBox.span12.blueButton.moveLeft

将创建

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

Answer 3

您不必指定div

#MyBox.span12.blueButton.moveLeft

将在div元素上应用所选的类和ID：

由于div是标签的常见选择，因此如果您是默认选项省略标签名称： .content编译为<div class="content"></div>

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

但是，您必须指定您使用的每个其他元素的标记有身份或班级。

实施例

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

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（为了清晰起见略作修改）：

<块引用>

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>

Jade（node.js） - 元素上有多个类？

4 个答案: