javascript - 如何使用Stylus CSS生成随机颜色？

我正在使用Express for Node.js，而我使用的CSS引擎是Stylus。手写笔很棒，但我似乎无法弄清楚如何传递颜色变量或以其他方式生成随机颜色。我尝试将javascript API用于手写笔，但我只是使自己感到困惑，并且可能使事情变得过于复杂。

var stylus = require('stylus');

app.use(stylus.middleware({
  src: __dirname + '/public',
  compile: function (str, path) {
    var mylib = function(style) {
      style.define('randomColor', function () {
        return '#5f5'; // temporary color just to see if it's working.
      });
    };
    return stylus(str).use(mylib);
  }
}));

然后在我的手写笔工作表中:

mainColor = randomColor()

但是，出现以下错误:



我一生都无法弄清楚如何正确地将颜色变量从javascript传递到触控笔表中。

编辑:

这是我的app.js文件:https://gist.github.com/4345823
这是我的手写笔文件:https://gist.github.com/4345839

最佳答案

我知道这是一个特别晚的答案，但是值得记录的内容永远不应该被忽略-正如您已经确定的那样，问题是手写笔在接收字符串时应该接收RGB或HSL颜色 Node 。

Stylus中的字符串如下所示:'text'，当它们被编译为CSS时，它们将按原样进行编译。您需要呈现纯CSS文本，而不是字符串。

触控笔具有内置功能，可用于将该字符串转换为纯CSS文本:unquote()
所以你可以简单地从

mainColor = randomColor()

到

mainColor =取消引用(randomColor())

但是，如果要保持手写笔清洁，则可能需要使用手写笔JavaScript API的nodes对象。如果要将函数从JavaScript传递到Stylus，请考虑返回Stylus Node 而不是原始数据类型的最佳实践:

style.define('randomColor', function () {
  var randomNum = function() { return Math.floor(Math.random() * 255 + 1); },
      r = randomNum(),
      g = randomNum(),
      b = randomNum();
  return new stylus.nodes.RGBA(r, g, b, 1); // random RGB node.
});

遗憾的是，关于Stylus Nodes的文档并不多，但是您真正需要作为引用的只是this。它包含所有可用 Node 。

关于javascript - 如何使用Stylus CSS生成随机颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13974942/