CODEWITHSUNDEEP
pug
MobileGuy
MobileGuy

Reputation: 1252

How to use the style tag with jade templates?

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 }

Upvotes: 78

Views: 98379

Answers (4)

Gene Bo
Gene Bo

Reputation: 12103

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"

Upvotes: 88

Tom
Tom

Reputation: 26839

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.

Upvotes: 69

mcbjam
mcbjam

Reputation: 7474

Work for me in jade file

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

Upvotes: 4

yowainwright
yowainwright

Reputation: 105

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 */

Upvotes: 3

Related Questions