escritura CSS dinámico con Jade

Estoy tratando de escribir un poco de CSS dinámico utilizando Jade, así:escritura CSS dinámico con Jade

style(type='text/css') 
    each item in colors 
     .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; }

Sin embargo, esto da el siguiente error:

ReferenceError: media='print') 
    7| style(type='text/css') 
    > 8|  - for(var item in colors) 
    9|   .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; } 
    10| block Content 
    11|  include scheduleTemplate 

item is not defined

Si quito el estilo etiqueta, rinde bien. ¿Hay alguna forma de usar la iteración dentro de un bloque de estilo?

Fuente

2012-03-30 Tyler Schroeder

'style' y' script' solo deben aceptar texto. No estoy seguro de por qué está intentando analizar su iteración. –

Bueno, no está analizando la interacción, solo está tratando de resolver el 'elemento' como una variable local. Parece que las variables pasadas a la vista todavía se pueden referenciar, pero las variables generadas dentro de ese bloque de script no pueden. –

Dado que las etiquetas style solo permiten el texto en Jade, trata su each item in colors como texto sin formato. Luego encuentra el #{item.class} e intenta analizarlo, pero falla porque no definió item en la línea anterior.

Desafortunadamente, no estoy seguro de que haya una buena manera de hacer esto en Jade. Es posible que sólo tiene que definir la totalidad de su css antes de tiempo en JS y luego insertarlo así:

style(type='text/css') 
    #{predefined_css}

En ese punto, sin embargo, podría ser más fácil de simplemente mover los estilos de una hoja de estilo externa que se genera para cada usuario y luego servirlo con algunos encabezados de almacenamiento en caché razonables. Eso evitaría las dificultades al tratar de hacer que Jade haga CSS dinámico y acelere las cargas de página posteriores para sus usuarios.

Fuente

2012-03-30 19:32:14

Sí - eso es a lo que le tenía miedo. Terminé escribiendo archivos CSS por cliente y haciendo referencia a ellos dinámicamente. ¡Gracias por tu ayuda! –

Podría usar Stylus. Está hecho por las mismas personas que crearon Jade y es casi idéntico a Jade dentro de lo razonable.

Fuente

2012-03-31 10:18:42 Daniel

Me encontré con un problema similar en el que quería agregar una clase específica a la etiqueta corporal dependiendo de la ruta, similar a lo que hice en PHP. Al final, utilicé la herencia de plantillas de jade para lograr un resultado similar.

Fuente

2012-08-08 18:12:47 RevNoah

Otra forma es importar su propia hoja de estilo css. En el Jade doc, se puede ver que se puede incluir una hoja de estilo con dicho código:

html 
    head 
    style 
     include style.css

A continuación, se puede definir cualquier CSS en un archivo independiente que se puede hacer referencia.

Fuente

2015-05-10 19:50:04 Vince

Respuesta

Cuestiones relacionadas