Shorthands
IDs and classes
IDs and classes are both pretty common attributes, so Jade gives us a shorthand method for writing them. This is similar to the way CSS selectors are written. An example of this is as follows:
|
Jade |
HTML |
|---|---|
p#hello Hello Word! | <p id="hello">Hello Word!</p> |
p#hello.world | <p id="hello" class="world"></p> |
Pretty familiar, eh? IDs are just prefixed with a # (pound symbol) and classes are prefixed with . (a period). These may be put in any order after the tag name with any number of classes.
Automatic div
Because the div tags are used so frequently, Jade offers a shorthand way for writing them; by omitting the tag, Jade assumes you want to use a div tag; therefore, the following code:
|
Jade |
HTML |
|---|---|
div#hello Hello Word! | <div id="hello"> Hello Word! </div> |
It can also be rewritten as:
|
Jade |
HTML |
|---|---|
#hello Hello Word! | <div id="hello"> Hello Word! </div> |
However, this is possible only as long as there is an ID and/or class where the tag name...
