2012-09-24 7 views
5

Ich baue eine kleine Knoten-App und Express mit Jade und Stylus verwenden, um einige grundlegende HTML-Seiten zu machen.Knoten-App-Variablen in Stylus-Datei übergeben

Ich war neugierig, ob es eine Möglichkeit für mich gibt, einige Variablen in die STYL-Datei zu übergeben, die von Node generiert werden? Ich bin mir bewusst, dass ich Variablen innerhalb der STYL-Datei definieren kann, aber ich muss dynamischer sein. Speziell suchte ich nach einer einfachen Möglichkeit, einige Farben in der db zu speichern, Knoten diese Werte zu erfassen und diese dann in die STYL-Datei einzufügen, so dass beim Rendern der Seite diese Variablen übergeben werden. Es scheint so zu sein -fähig, aber mir fehlen die Details. Jede Hilfe wird geschätzt. Vielen Dank!

Antwort

6

Mit der Funktion define() des Stylus API können Sie Stylus-Variablen festlegen und JS-Funktionen zur Verfügung stellen.

6

Dank @ebohlman als sein Rat war nahe, was ich letztlich umgesetzt habe.

im Grunde ich habe versucht, herauszufinden, wie diese von der Connect-Middleware an der Spitze zu tun und hier ist, was ich kam mit:

wenn app.configure tut i die benutzerdefinierte kompilieren verwendet Kompilierung-Funktion (key ‚kompilieren ‚) wie folgt:

app.use(require('stylus') 
    .middleware({ 
    src: app.root + '/app/public', 
    compile: compile 
    }) 
); 

dann habe ich ein paar Funktionen erstellt:

var stylus = require('stylus'); 
var mylib = function(style){ 
    style.define('themeColor1', function(){ 
    //call to the db that returns a color 
    color = 'blue'; 
    color = color ? color : 'orange'; 
    return new stylus.nodes.Literal(color); 
    }); 
}; 

var compile = function(str, path) {  
    return stylus(str) 
    .use(mylib); 
}; 

dann innerhalb der .styl Datei i tun:

background-color themeColor1(); 

Der ternäre Operator in der themeColor1-Funktion ermöglicht einfache Standardeinstellungen und eine Überschreibung. Ich brauchte ein bisschen, um die API anhand der Beispiele herauszufinden, aber es scheint, als könnte dies eine Lösung sein, die andere gerne hätten. Wenn jemand irgendwelche Nachteile dieses Ansatzes hat, lass es mich wissen.

+0

Literale scheinen am besten zu funktionieren. –

+2

Wissen Sie, wie Sie eine Variable einfach von Knoten zu Stift übergeben, ohne eine Funktion zu erstellen. Ich sah die Antwort hier für .define(), aber es scheint für mich zu funktionieren. – qodeninja

+0

Ich fand, dass 'Literal' nicht wie erwartet funktioniert, ich musste' Ident' verwenden –