How to use a style tag with jade patterns?

Question

This style code worked for me a few months ago. I upgraded to the latest Jade NPM package and now it does not work. Can someone please help me with the right way to embed 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 when closing}

 unexpected text } 

Answer 1

There are three ways to put text inside your tags in Jade.

1. Place the text immediately after the tag, for example.

 h1 Some header text 

And the output will be:

 <h1>Some header text</h1> 

2. Place the indented text under the | eg

 p | Some text goes | here 

And the output will be:

 <p>Some text goes here</p> 

3. The suffix of the tag with a dot and indented text below (without | ), for example

 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 foregoing, the approach you have chosen (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 this helps.

Answer 2

This worked for me:

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

Got this from: https://github.com/mquandalle/meteor-jade/issues/102 , where the message suggests using "dot notation"

Answer 3

This is the way to do it (designer version)

 include [some-html-include-name].html 

Then, add the style tag and styles to this include file.

 <style type="text/css"> /* your styles here */ 

Answer 4

Work with me in jade file

 style(media='screen', type='text/css') @media (min-width: 1200px) { .container{ max-width: 970px; } }