Writing Dynamic CSS with Jade

Writing dynamic CSS with Jade

Because style tags only allow text in Jade, it's treating your each item in colors as plain text. Then it encounters the #{item.class} and attempts to parse that, but it fails because it didn't define item on the previous line.

Unfortunately, I'm not sure that there is a good way to do this in Jade. You might just have to define all of your css ahead of time in JS and then insert it like so:

style(type='text/css')
    #{predefined_css}

At that point though, it might be simpler to just move the styles to an external stylesheet that gets generated for each user and then serve it with some reasonable caching headers. That would avoid the difficulties with trying to make Jade do dynamic CSS and speed up subsequent page loads for your users.

How do you use javascript variables when writing inline CSS styles in a Jade template

Use #{variable} to print a variable within an element's text.

Creating Dynamic Classes in Jade/Pug

You can do this:

div(class="abc-"+len)

attributes are interrupted automatically, more about attributes

Dynamic element in Jade with String and a variable

Try something like this (I assume elem = "foot" in this case):

- var tag = "t" + elem;
table
  thead
  tbody
  #{tag}

should render:

<table>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

But keep in mind this table is not html conform. It's just for demonstration.

How to use the style tag with jade templates?

There are three ways of putting text inside your tags in Jade

1. Put text just after the tag e.g.

h1 Some header text

And the output will be:

<h1>Some header text</h1>

2. Put indented text below the tag with | e.g.

p
    | Some text goes 
    | here

And the output will be:

<p>Some text goes here</p>

3. Suffix the tag with a dot and indent your text below (with no |) e.g.

p.
    This way 3rd way of putting 
    text inside

And the output will be:

<p>This way 3rd way of putting text inside</p>

---

So based on the above, the approach you chose (as in your comment) is correct (option 3).

doctype 5
html(lang="en")
    head
        style(type='text/css').
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

I hope that will help.

How do you make a dynamic loop in JS/HTML like you do in Jade?

You can do this purely by JavaScript.

First simply write a

function call(n){

    //Accessing the ul element
    var main = document.getElementById("main");

    for(var i=0;i<n;i++){
        var child = document.createElement("li");

        //if you want to add data to your li
        child.innerHTML = i+1;

        //appending the child to the main ul
        main.appendChild(child);
    }

}

Here, 'n' is the number of li you want to generate.

Here is a demo

Jade - calling page specific css pages

This should do it

link(rel="stylesheet", href="#{req.path + '.css'}", type="text/css")

Where you pass either req (the request object) as a local variable when rendering the jade template (or even just pass in req.path as path). This could just be handled in your layout.jade and it will work for each of your route paths.

If you want to get fancy, you could establish a consistent pattern where a page's route maps 1 to 1 to a filesystem path for a .css file in your public directory. In that case you could easily but the stylesheet link tag inside a conditional and only link to the .css file if you find a matching one on disk.

---

Related Topics