Pug preserves whitespace within elements, including:.See the methods described below, however, for when you do need to insert space between elements. This is generally not a problem for block-level elements like paragraphs, because they will still render as separate paragraphs in the web browser (unless you have changed their CSS display property). So, the closing tag of an HTML element will touch the opening tag of the next.Pug removes indentation, and all whitespace between elements.
You just need to remember two main points about how whitespace works. Don’t worry, though, you’ll get the hang of it soon enough. Managing the whitespace of the rendered HTML is one of the trickiest parts about learning Pug. Leave a comment below, and I'd be glad to answer your questions and comments.This text belongs to the paragraph tag.This text belongs to the div tag.
I'd love to hear from you, and see how you implemented Pug in your projects. You can come back to it anytime you need a specific syntax, especially for the more complex elements. If you just want to manually convert a Pug template to HTML, I found this online converter that did an amazing job for me, and it will certainly make it for you too.įinally, if you need a quick overview of the most common Pug syntaxes, check this cheat sheet. It has very straightforward steps about the setup and integration. You can make more use of it by including other pug files, creating complex layouts, or even including markdown files.Īdding Pug to your projects is very easy, just follow the official documentation. Now you are ready to enable your Pug templating engine! With the for loop I could add 36 sparks rotated by 10 degrees each, and with a random delay in their animation, that - combined with CSS - resulted in this: I used this trick in almost all items, often combined with more complex parameters: This will create 10 elements inside the sky. Enter fullscreen mode Exit fullscreen mode
0 kommentar(er)
