2

手写笔看起来很棒，但根本没有教程。请告诉我如何配置手写笔。我是说：

将所有这些 javascript 命令放在哪里，在哪个文件中。

stylus(str)
    .set('filename', __dirname + '/css/test.styl')
    .define('url', stylus.url({ paths: [__dirname + '/public'] }))
    .render(function(err, css){

    });

我需要在我的 css 变量中使用基本路径，例如：

background('bas_path/image.png);
4

1 回答 1

1

我很清楚缺乏关于使用 Stylus 的教程，我确实打算自己写一个，也许作为某种博客文章。我只需要进入博客。搁置了很久。

首先，为了使用 Stylus - 你需要安装Node.JS。到目前为止，这是开始使用 Stylus 的最简单和最推荐的方式。Stylus可以在浏览器中工作，如此处所示，但确切地了解如何做到这一点本身就是一个挑战。

但是尽管缺乏教程，但学习起来确实不是一件难事。要回答您的问题，这实际上取决于您想如何使用 Stylus，因为它可以以几种不同的方式使用。

第一种方法是简单地编写您的.styl文件，然后使用 Stylus 的内置可执行文件来观察您的文件并将其编译为 CSS。它的文档可以在这里找到。

第二种方法涉及在您的问题中使用代码。将该代码放入哪个文件并不重要。只要您require('stylus'). Stylus 的文档并非 100% 完整，但如果您阅读它两次，您会发现它实际上为您解答了所有问题。

第三种方式是使用Connect中间件，也有相关文档。Connect中间件完全相同，只需将ExpressJS任何对“连接”的引用替换为“快递”即可。

至于在后台 mixin 中引用基本路径变量，实际上是相当简单的。

像这样设置一个变量：

base-path = 'img/path/'

然后创建你的混音：

bg-image(image)
  background: url(base-path + image)

最后，把你的 mixin 当作一个简单的属性来调用：

body
  bg-image: 'image.png'

这将编译为：

body {
  background: url("img/path/image.png");
}

一旦我写了一篇关于 Stylus 的体面教程，我将在不久的将来回到这个答案，并在此处附加链接。因此，如果您愿意等待，请继续关注。

于 2013-06-01T13:02:03.150 回答