How to use the style tag with jade templates?

Question

This style code worked for me a few months back. I have updated to the latest Jade NPM package and now it is not working. Can some please assist me with the proper way to inline a style in a Jade template?

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

I get this error on the closing }

unexpected text }

Answer 1

This worked for me:

style.
  body {
    background-color: {{themeColor}};
  }

Got it from: https://github.com/mquandalle/meteor-jade/issues/102 where the post suggests to use "dot notation"

Answer 2

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.