如何在jade模板中使用样式标签？

Question

这段样式代码在几个月前对我有效。我已经更新到最新的Jade NPM包，现在它不起作用了。请有人帮助我以正确的方式将样式嵌入Jade模板中？

doctype 5
html(lang="en")
    head
        style(type='text/css')
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

在结尾处遇到了这个错误 }

unexpected text }

- MobileGuy

---

我每次在 Stack 上发布完后的10分钟内就想到解决方法了。我在样式行末尾加了一个句点。style(type='text/css').这是正确的做法吗？ - MobileGuy

是的，那是其中一种正确的方法。实际上有三种将纯文本放入标记中的方法。您可以在将文本放入标记中了解更多信息。 - Tom

抱歉，但这不是内联CSS。这只是通过样式标签将CSS放在头部。内联CSS将类似于此： <p style="font-size:20px;">测试</p> - hugo der hungrige

Answer 1

这对我很有效：

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

从这里获取：https://github.com/mquandalle/meteor-jade/issues/102，帖子建议使用"点标记"

- Gene Bo

---

谢谢，我刚刚不得不将它更改为#{themeColor}。 - Dominic

Answer 2

在Jade中，有三种将文本放入标签中的方法。

1. 将文本放在标签后面，例如：

h1 Some header text

输出将会是：

<h1>Some header text</h1>

2. 在带有|的标签下方添加缩进文本，例如：

p
    | Some text goes 
    | here

输出将为：

<p>Some text goes here</p>

3. 在标签后加上句点，并在下方缩进文本（无需使用|）例如：

p.
    This way 3rd way of putting 
    text inside

输出结果将会是：

<p>This way 3rd way of putting text inside</p>

根据上述内容，您选择的方法（就像您在评论中所述）是正确的（选项3）。

doctype 5
html(lang="en")
    head
        style(type='text/css').
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

我希望那能有所帮助。

- Tom

Answer 3

在jade文件中为我工作

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

- mcbjam

Answer 4

这是设计师版本的操作方式。

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

然后在那个包含文件中放置您的style标记和样式。

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

- yowainwright

---

这样做完全违背了使用模板引擎的初衷，即您不必编写HTML。如果您想要使用外部文件，请使用外部CSS文件并将其链接。 - Radon Rosborough

上面的评论是几年前的了。当时，将关键CSS内联变得流行起来（我相信）。上面的建议是一种内联大量样式的方法。开发人员可以编译CSS，然后将其内联到jade/pug包含部分中。上面的其他评论提出了在jade/pug模板中具有内联样式的其他好方法。我上面发布的示例仍然似乎是一种方法。~感谢您的批评 - yowainwright