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

Question

我正在使用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()

但是,我收到以下错误:

预期RGB或HSL值,得到字符串#5f5

我为我的生活无法弄清楚如何从javascript正确地将颜色变量传递到手写笔表.

编辑:

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

Answer 1

我知道这是一个非常晚的答案,但值得记录的内容永远不应该被忽略 - 正如您所知,问题是Stylus接收字符串时应该接收RGB或HSL颜色节点.

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

Stylus有一个内置函数,您可以使用它将该字符串转换为纯CSS文本: unquote()

所以你可以简单地改变一下

mainColor = randomColor()

至

mainColor = unquote(randomColor())

但是,如果要保持Stylus清洁,可能需要使用Stylus JavaScript API的nodes对象.如果您将函数从JavaScript传递给Stylus,请将其作为返回Stylus节点而非原始数据类型的最佳实践:

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.
});

可悲的是,没有手写笔节点多文档,但你真的需要为基准是这个.它包含所有可用节点.