Desidero essere in grado di creare una directory di file scratch di pagine Web, in cui ogni file è una pagina autonoma.È possibile utilizzare plug-in Stilo con codice stilo incorporato incorporato in un file Jade?

Questo è abbastanza facile con il normale HTML/CSS/JS:

<head> 
    <style> 
     p { 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    <p>lololol</p> 
</body>

Ed è allo stesso modo facile con Jade/stilo/CoffeeScript:

head 
    :stylus 
     p 
      color red 
body 
    p lololol

Il fatto è che non c'è modo chiaro per usa i plugin Stylus in questo modo. In particolare, mi piacerebbe usare colorspaces.js e pennino a sperimentare con i colori in modo più efficace:

head 
    :stylus 
     @import 'nib' 
     p 
      color CIELCH(20.470, 74.265, 314.113) 
      background-color linear-gradient(white, black) 
body 
    p lololol

La soluzione Attualmente sto usando

È possibile sborsare Jade modificando these lines così:

/** 
    * Transform stylus to css, wrapped in style tags. 
    */ 

    stylus: function(str, options){ 
+ colorspaces = require('colorspaces'); 
+ nib = require('nib'); 
    var ret; 
    str = str.replace(/\\n/g, '\n'); 
    var stylus = require('stylus'); 
- stylus(str, options).render(function(err, css){ 
+ stylus(str, options).use(colorspaces()).use(nib()).render(function(err, css){ 
     if (err) throw err; 
     ret = css.replace(/\n/g, '\\n'); 
    }); 
    return '<style type="text/css">' + ret + '</style>'; 
    },

E se ti nstall le dipendenze di Jade (dovevo npm install commander e npm install mkdirp), è possibile navigare a /jade_fork/bin/ e fare ./jade name_of_file.jade.

Ma preferirei rimanere nel ramo principale di Jade per motivi di manutenzione.

fonte

2012-09-05 Kelsey Higham

Aggiornamento:

Qui è il modo migliore che ho trovato:

Salva come per esempio ~/bin/jade:

#!/usr/bin/env node 

var jade = require('jade'); 

jade.filters.stylus = // your code from above 

require('jade/bin/jade');

che funzionerà esattamente come /usr/local/bin/jade, tranne che userà il codice per la compilazione stilo, con pennino ecc

Vecchia risposta:

Vi suggerisco di fare così:

var jade = require('jade'); 

jade.filters.stylus = // your code from above 

jade.compile(/* ... */);

Perderai lo script della riga di comando jade, ma dovresti essere in grado di compilare i tuoi file in questo modo, mentre dipende dal master di giada.

fonte

2012-09-05 10:27:28

Grazie, questa (la nuova risposta) funziona alla grande! –

È possibile utilizzare plug-in Stilo con codice stilo incorporato incorporato in un file Jade?

La soluzione Attualmente sto usando

risposta

Problemi correlati