更改Jade中的字体和颜色

Question

我是Jade的新手，我只是想知道如何更改文本的字体和颜色？如果我有一个layout.jade，我用它来扩展到我的helloworld.jade和userlist.jade;我只想更改userlist.jade的字体和颜色。我只是想知道语法是什么。是否像

extends layout

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

但是我遇到了像

这样的错误

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

我也在使用node.js来运行我的服务器。 谢谢。

Answer 1

您需要在style之后包含一个尾随点，以使jade解析器忽略在样式标记下缩进的任何内容。在您的示例中，它试图将h1读作嵌套在style标记内的标记，而不仅仅是通过浏览器将其解释为CSS规则的纯文本。

extends layout

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

Working example.

删除该codepen中style之后的点，你会看到他们的jade解析器对你大喊大叫，并说它无法解释你试图在h1内嵌入的style标记{1}}标记。

PS - 您也有不同的缩进尺寸。您的缩进需要是所有选项卡或所有空格（相同数量的空格）。 Jade不允许你混合和匹配缩进样式，因为它取决于你的缩进来编译HTML。

Answer 2

您需要将style元素设置为代码块，否则它会将其解析为HTML。并使用一致的缩进。

extends layout

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

Answer 3

我希望这是一个快速的解决方案

＆＃13;

＆＃13;

extends layout

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

＆＃13;

＆＃13;

＆＃13;