Schreiben dynamischer CSS mit Jade

Ich versuche, mit Jade einiger dynamischen CSS zu schreiben, etwa so:Schreiben dynamischer CSS mit Jade

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

aber dies gibt die folgenden Fehler:

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

Wenn ich den Stil entfernen Tag, es macht gut. Gibt es eine Möglichkeit, die Iteration in einem Stilblock zu verwenden?

Quelle

2012-03-30 Tyler Schroeder

'style' und' script' sollten nur Text akzeptieren. Ich bin mir nicht sicher, warum es versucht, Ihre Iteration zu analysieren. –

Nun, es analysiert nicht die Interaktion, es versucht nur, "Element" als eine lokale Variable aufzulösen. Es wird angezeigt, dass an die Ansicht übergebene Variablen immer noch referenziert werden können, jedoch keine Variablen, die in diesem Skriptblock generiert werden. –

Da style Tags nur Text in Jade erlauben, behandelt es Ihre each item in colors als Nur-Text. Dann trifft es auf die #{item.class} und versucht, das zu analysieren, aber es schlägt fehl, weil es item in der vorherigen Zeile nicht definierte.

Leider bin ich nicht sicher, dass es eine gute Möglichkeit gibt, dies in Jade zu tun. Sie könnten nur alle Ihre CSS vor der Zeit in JS definieren müssen und es dann einsetzen, wie so:

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

An diesem Punkt allerdings könnte es einfacher sein, nur die Stile zu einem externen Stylesheet zu bewegen, die erzeugt werden für jeden Benutzer und dann mit einigen vernünftigen Cache-Headern dienen. Das würde die Schwierigkeiten beim Versuch, Jade dynamisches CSS zu machen und die nachfolgenden Seitenladevorgänge für Ihre Benutzer zu beschleunigen, vermeiden.

Quelle

2012-03-30 19:32:14

Ja, genau davor hatte ich Angst. Ich schrieb CSS-Dateien pro Kunde und referenzierte sie dynamisch. Danke für Ihre Hilfe! –

Sie könnten Stylus verwenden. Es ist von denselben Leuten gemacht, die Jade erschaffen haben und ist im Grunde mit Jade identisch.

Quelle

2012-03-31 10:18:42 Daniel

Ich stieß auf ein ähnliches Problem, bei dem ich je nach Route eine bestimmte Klasse zum Body-Tag hinzufügen wollte, ähnlich wie in PHP. Am Ende habe ich die Template-Vererbung von Jade verwendet, um ein ähnliches Ergebnis zu erzielen.

Quelle

2012-08-08 18:12:47 RevNoah

Eine andere Möglichkeit besteht darin, ein eigenes CSS-Stylesheet zu importieren. Im Jade doc, können Sie sehen, dass Sie ein Stylesheet mit einem solchen Code enthalten können:

html 
    head 
    style 
     include style.css

Dann können Sie eine beliebige CSS in einer separaten Datei definieren können, die Sie verweisen können.

Quelle

2015-05-10 19:50:04 Vince

Schreiben dynamischer CSS mit Jade

Antwort

Verwandte Themen