attributes.pug

//- An attribute but be added inside parentheses.
//- They might look similar to plain HTML attributes but value of an attribute is actually a JavaScript exprssion.

//- Below is string used as JavaScript expression.
a(href="https://google.com") google.com

//- An example of actual JavaScript expression.
//- You can separate multiple attributes using `,` or ` ` space character.
a(href="https://" + "google" +  ".com", target="_blank") google.com

//- Using inline JavaScript variable
//- Read more about inline JavaScript code in `inline JavaScript` topic below.
//- Below, we used ` ` space character to separate multiple attributes
- var srcLink = "https://design.google.com/logo.png"
img(src=srcLink alt="google logo")

//- using ES6 string interpolcation.
- var size = "medium"
img(src=`https://design.google.com/logo-${size}.png` alt="google logo")

//- Using boolean value.
input(type='checkbox' checked)
input(type='checkbox' checked=true)
input(type='checkbox' checked=false)

//- If you have huge list of attributes, you can span attributes over multiple lines.
//- We can also use single-quotes `''` or double-quotes `""` to wrap attribute name. 
input(
    type="text"
    "name"="username"
    'placeholder'="Enter your username"
    readonly=false
    required
)

//- Pug.js escapes all attributes by default
img(src="<code></code>")

//- To prevent attribute value escape, use `!=` syntax instead of `=` for attribute value assignment
img(src!="<code></code>")

//- Adding style attribute is just like any other attribute using string value.
a(href="some-link", style="color:red;font-size:12px;") Click Me!
//- But Pug.js provides `Object` literal syntax as well.
a(href="some-link", style={color: "Red", "font-size": "12px"}) Click Me!

//- Adding class attribute is also just like any other attribute using string value.
a(href="some-link", class="link special") Click Me!
//- But Pug.js provides `Object` and `Array` syntax as well.
a(href="some-link", class=["link", "special"]) Click Me!
a(href="some-link", class=["link", "special"] class="general") Click Me!
a(href="some-link", class={link: true, special: true, hidden: false}) Click Me!
//- Class literal is also valid
button.btn.btn-sm Click Me
p.simple.
    Hello World!
    I am in a block
.general.div I am in default tag is `div`.
//- Like class literal, id literal is also valid.
a#main-link Click Me!
a.link#main-link Click Me!
#main-link I am in default tag is `div`.