CODEWITHSUNDEEP
pug
Piddien
Piddien

Reputation: 1446

Jade (node.js) - more than one class on an element?

in jade one can write:

div.container

and it compiles into:

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

But what if you have several classes like:

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

I have written it like this:

div(class="span 4")

But I am thinking: Is there not a better way of doing it in jade?

Upvotes: 41

Views: 41276

Answers (4)

Matias Kinnunen
Matias Kinnunen

Reputation: 8540

Note that you can combine the .classname syntax with the class attribute:

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

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

And the class attribute also supports arrays and objects for more advanced use cases.

From the Class Attributes section in the documentation (slightly modified for clarity):

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>

Upvotes: 0

PhilippeThomas
PhilippeThomas

Reputation: 151

You don't have to specify div

#MyBox.span12.blueButton.moveLeft

will apply the selected class and id on a div element :

Since div's are such a common choice of tag, it is the default if you omit the tag name: .content compiles to <div class="content"></div>

See the Pug (new name for Jade) documentation.

However you have to specify the tags of each and every other element you use with an id or class.

Ex.

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

Upvotes: 5

gartox
gartox

Reputation: 891

The following format

    div#MyBox.span12.blueButton.moveLeft

will create

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

Upvotes: 9

Matt Ball
Matt Ball

Reputation: 359786

From the documentation:

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>

Upvotes: 94

Related Questions