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()

但是,我收到以下错误：

RGB or HSL value expected, got a string #5f5

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

编辑：

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

解决方法:

我知道这是一个非常晚的答案,但是值得记录的东西永远不应该被忽略 – 正如你所发现的那样,问题是Stylus正在接收一个字符串,当它应该接收RGB或HSL颜色节点时.

Stylus中的字符串看起来像这样：’text’,当它们被编译为CSS时,它们按原样编译.您需要呈现纯CSS文本,而不是字符串.

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

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

mainColor = randomColor()

至

mainColor = unquote(randomColor())

但是,如果要保持Stylus的清洁,可能需要使用Stylus JavaScript API的节点对象.如果您将函数从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.
});

遗憾的是,没有太多关于Stylus Nodes的文档,但您真正需要的是this.它包含所有可用节点.

原文地址：https://codeday.me/bug/20190729/1569843.html