Question

Stylus看起来很棒，但根本没有教程。请告诉我如何配置Stylus。我的意思是：

将所有这些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);

Answer 1

我很清楚缺乏有关使用Stylus的教程，我打算自己写一篇，或许作为某种博客文章。我只需要进入博客。已经把它推迟了很久。

首先，为了使用Stylus，您需要安装 Node.JS 。这是迄今为止最简单，最推荐的入门和使用Stylus的方法。 Stylus 可以在浏览器中工作，如here所示，但确切地了解如何做到这一点本身就是一个挑战。

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

第一种方法是编写.styl文件，然后使用Stylus的内置可执行文件来监视和编译文件到CSS。可以找到here.

的文档

第二种方法涉及在您的问题中使用代码。放入该代码的文件并不重要。只要你require('stylus')，它就可以在任何地方工作。 Stylus的文档并非100％完整，但如果您阅读了两次you'll see that it actually answers all of your questions for you.

第三种方法是使用Connect中间件和there's documentation for that too。 Connect中间件与ExpressJS完全相同，只需将'connect'的引用与'express'交换。

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

设置如下变量：

base-path = 'img/path/'

然后创建你的mixin：

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

然后最后，将你的mixin称为一个简单的属性：

body
  bg-image: 'image.png'

这将编译为：

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

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

如何从手写笔开始？

1 个答案: