Writing dynamic CSS with Jade

Question

I'm trying to write out some dynamic CSS using Jade, like so:

style(type='text/css')
    each item in colors
        .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; }

However this gives the following error:

ReferenceError: media='print')
    7|  style(type='text/css')
  > 8|      - for(var item in colors)
    9|          .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; }
    10| block Content
    11|     include scheduleTemplate

item is not defined

If I remove the style tag, it renders fine. Is there any way to use iteration within a style block?

Answer 1

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.

Answer 2

You could use Stylus. It's made by the same people that created Jade and is almost identical to Jade within reason.

Answer 3

Another way is to import your own css stylesheet. In the Jade doc, you can see that you can include a style sheet with such code:

html
  head
    style
      include style.css

Then, you can define any CSS in a separate file that you can reference.

Answer 4

I ran into a similar issue where I wanted to add a specific class to the body tag depending on the route, similar to what I've done in PHP. In the end, I used jade's template inheritance to achieve a similar result.