Jade中可以写成:
div.container
它会被编译为:
<div class="container"></div>
但是如果你有多个类似于这样的类:
<div class="span 4"><div>
我写的代码是这样的:
div(class="span 4")
但是我在想:在jade中难道没有更好的方法吗?
Jade中可以写成:
div.container
它会被编译为:
<div class="container"></div>
但是如果你有多个类似于这样的类:
<div class="span 4"><div>
我写的代码是这样的:
div(class="span 4")
但是我在想:在jade中难道没有更好的方法吗?
根据文档:
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>
div#MyBox.span12.blueButton.moveLeft
将创建
<div id="MyBox" class="span12 blueButton moveLeft"></div>
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
.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
orfalse
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>