CODEWITHSUNDEEP
node.jspug
user3128376
user3128376

Reputation: 994

Change Font and Color in Jade

I'm new at Jade and I'm just wondering how do I change font and color of the texts? If I have a layout.jade that I'm using to extend to my helloworld.jade and userlist.jade; and I only want to change the font and color of userlist.jade. I'm just wondering what the syntax would be. Is it something like 

extends layout

style
    h1{font-size: 19px; color: #464646;}
block content
  h1= title
  p Welcome to #{title}

However I'm getting errors like 

"Invalid indentation, you can use tabs or spaces but not both"

Also I'm using node.js to run my server. Thanks.

Upvotes: 1

Views: 11355

Answers (3)

roshan raju
roshan raju

Reputation: 1

I hope this is a quick solution

extends layout

h3(style=" color: #FF333") Your text here
h2(style=" color: #283FF") Your text here

Upvotes: 0

ChevCast
ChevCast

Reputation: 59231

You need to include a trailing dot after style in order to make the jade parser ignore anything indented under the style tag. In your example it's trying to read the h1 as a tag nested within the style tag, rather than just plain text to be interpreted as CSS rules by the browser.

extends layout

style.
    h1 {
        font-size: 19px;
        color: #464646;
    }
block content
    h1= title
    p Welcome to #{title}

Working example.

Remove the dot after style in that codepen and you'll see that their jade parser yells at you and says it can't interpret the h1 tag you're trying to nest within the style tag.

PS - You also had differing indentation sizes. Your indentation needs to be either all tabs, or all spaces (same number of spaces). Jade doesn't let you mix and match indentation styles since it depends on your indentation to compile the HTML.

Upvotes: 3

Scimonster
Scimonster

Reputation: 33409

You need to set the style element as a code block, or else it will parse it as HTML. And use consistent indentation.

extends layout

style.
  h1{font-size: 19px; color: #464646;}
block content
  h1= title
  p Welcome to #{title}

Upvotes: 2

Related Questions