How do you write style and class attributes using PUG – part 4? – Meet Pug 07


OK, so last time we’ve played with the unescaped and the boolean attribute in PUG. Let’s play some more. Let’s close some of those files, not all of them and in here, into attributes I’ll create style.pug And I’ll also drag style over here, come on. Close this and close this one and into style If you have already played with React you might know about this one otherwise let’s do an “a” tag With a style and in here Let’s pass an object and do: color With the value of red And we can see, the style receives this one, over here Let’s also do background And color, background-colour: blue However this one should not work and if we open the console we can see that there is an error over there That’s because we need to cameCase So backgroundColor, like that. If we save it we can see Color red and background … actually we don’t need to camelCase Maybe we need to put it in a string. Let’s put it in a string It’s not like React, it’s not React Now we’ve got color: red and background-colour: blue So that the style one. Now let’s create another one The class attribute. class.pug And open the class.pug, close that style So let’s create a couple of arrays over here and I’ll do: class, var class1List=[] and this might sound familiar to you from Bootstrap, btn and btn-primary I’ll use some examples that you might be already used to Let’s do: var class2List=[] btn-small And now let’s do a div(class=class1List) If we save it we can see that this array Has been joined into values using space So whatever values you’ll be inputting in here, maybe like that: It will be joined. Let’s do another one Another div, a couple of pipes For whitespace control, and this would be the second one Ok, so you can see that I also converts it into just a single value over there However, there is another thing, we can repeat this attribute class And pass it class1List Now, if we look into it, it joined, it concatenated The two arrays into one and then outputted all values with spaces between them Now lets do some more classes, let’s do some more classes. New file literal-class.pug Move the pug on top, close that file No, no. we want this to be … copy the name of it And delete that file And we want to create a new file inside the “attributes” not in the “tmp” So literal-class.pug and then open literal-class.html , split it Horizontally and we are almost there Ok so literal class means we can do an “a” tag with .btn as a class and then Click me Go away, go away! So this is like that. You can also do another dot, let’s do some pipes And .btn.btn-small So we can see that the second one is like that And we can also do a div, pipe pipe, div .this-is-a-class However, if you want to omit the div tag which is in Pug the default one You can just do the class like in CSS and it will convert By default into this div, so the default tag in Literal class in pug is div You can type the div or you can optionally omit it So, happy hacking!

You may also like...

2 Responses

  1. codetap says:

    Is this getting more and more interesting?

  2. Cornel Cristian Filip says:

    Yes, it is getting more and more interesting!
    Style and class attributes: CHECKED!
    Nice trick by omitting the div class 5:24 just like in CSS!

Leave a Reply

Your email address will not be published. Required fields are marked *