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

Question

我使用的是 Express for Node.js，我使用的 CSS 引擎是 Stylus。 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 or HSL value expected, got a string #5f5

我这辈子都不知道如何将颜色变量从 javascript 正确地传递到手写笔表中。

编辑:

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

Answer 1

我知道这是一个异常迟到的答案，但永远不应忽视值得记录的内容 - 正如您所确定的那样，问题是 Stylus 正在接收一个字符串，而它应该接收一个 RGB 或 HSL 颜色 Node 。

Stylus 中的字符串看起来像这样:'text'，当它们被编译成 CSS 时，它们会按原样编译。您需要呈现纯 CSS 文本，而不是字符串。

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

所以你可以简单地改变行

mainColor = randomColor()

到

mainColor = unquote(randomColor())

但是，如果您想保持 Stylus 干净，您可能需要使用 Stylus 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 Node 的文档不多，但您真正需要作为引用的是 this .它包含所有可用 Node 。