76

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 }
hugo der hungrige
  • 12,382
  • 9
  • 57
  • 84
MobileGuy
  • 1,232
  • 1
  • 11
  • 21
  • 7
    As always 10 minutes after I post to stack I figure it out. I added a dot to the end of the style line style(type='text/css'). Is this the proper way to do it? – MobileGuy Feb 13 '14 at 20:58
  • 2
    Yes, that's one of the proper ways. There are three ways to put plain text inside a tag actually. You can find out more on [Putting Text Inside your Tags](http://jade-lang.com/tutorial/) – Tom Feb 13 '14 at 21:23
  • 1
    Sorry, but this is not inline css. This is just putting css in your head via a style tag. Inline css would be something like this:

    test

     – hugo der hungrige Dec 04 '15 at 16:51

4 Answers4

85

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"

Zeeshan Hassan Memon
  • 8,105
  • 4
  • 43
  • 57
Gene Bo
  • 11,284
  • 8
  • 90
  • 137
67

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.

Tom
  • 26,212
  • 21
  • 100
  • 111
4

Work for me in jade file

style(media='screen', type='text/css')
     @media (min-width: 1200px) {
        .container{
           max-width: 970px;
             }
          }
mcbjam
  • 7,344
  • 10
  • 32
  • 40
3

This is the way to do it (designer version)

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

Then in that include file put your style tag and styles

<style type="text/css">
/* your styles here */
yowainwright
  • 105
  • 1
  • 6
  • This defeats the entire purpose of using a templating engine, namely that you don't have to write HTML. If you want to use an external file, use an external css file and `link` that. – Resigned June 2023 Jun 09 '17 at 20:41
  • 1
    The comment above was from a few years ago. At that time inlining critical css was becoming popular (I believe). The suggestion above is one way to inline a lot of styles. The developer could/can compile css and then inline it into a jade/pug include partial. Other comments above suggest other good ways to have inline styles within jade/pug templates. The example I posted above still seems like 1 way to do it. ~Thanks for your critique – yowainwright Jun 28 '17 at 17:13