我希望能够创建一个网页草稿文件目录,其中每个文件都是一个独立的页面。
对于普通的HTML/CSS/JS来说,这非常容易实现:
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>lololol</p>
</body>
如果使用Jade/Stylus/CoffeeScript,同样很容易:
head
:stylus
p
color red
body
p lololol
问题在于,没有明确的方法来使用Stylus插件。具体而言,我想要使用colorspaces.js和nib以更有效地进行颜色实验:
head
:stylus
@import 'nib'
p
color CIELCH(20.470, 74.265, 314.113)
background-color linear-gradient(white, black)
body
p lololol
我目前正在使用的解决方法
您可以通过更改这些行来fork Jade:
/**
* 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>';
},
如果您安装了Jade的依赖项(我不得不npm install commander
和npm install mkdirp
),则可以导航到/jade_fork/bin/
并执行./jade name_of_file.jade
。
但出于维护原因,我更喜欢留在Jade的主分支上。