pug - programacion - ¿Cómo utilizar la etiqueta de estilo con plantillas de jade?

pug preprocesador html

Question

Este código de estilo me funcionó hace unos meses. He actualizado al último paquete de Jade NPM y ahora no está funcionando. ¿Alguien puede ayudarme con la forma correcta de alinear un estilo en una plantilla de Jade?

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

Me sale este error en el cierre}

unexpected text }

Answer 1

Esta es la forma de hacerlo (versión de diseñador).

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

Luego en ese archivo de inclusión pon tu etiqueta de style y estilos.

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

Answer 2

Esto funcionó para mí:

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

Lo obtuve de: https://github.com/mquandalle/meteor-jade/issues/102 donde la publicación sugiere usar "notación de puntos"

Answer 3

Hay tres formas de poner texto dentro de tus etiquetas en Jade

1. Ponga texto justo después de la etiqueta, por ejemplo

h1 Some header text

Y la salida será:

<h1>Some header text</h1>

2. Coloque el texto con sangría debajo de la etiqueta con | p.ej

p
    | Some text goes 
    | here

Y la salida será:

<p>Some text goes here</p>

3. Sufije la etiqueta con un punto y sangra su texto a continuación (sin | ) por ejemplo

p.
    This way 3rd way of putting 
    text inside

Y la salida será:

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

Por lo tanto, en base a lo anterior, el enfoque que eligió (como en su comentario) es correcto ( opción 3 ).

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

Espero que le ayudará.

Answer 4

Trabaja para mi en el archivo de jade

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