Javascript 如何使用手写笔CSS生成随机颜色？

我使用的是Node.js的Express，我使用的CSS引擎是触控笔。触控笔非常棒，但我似乎不知道如何传入颜色变量或以其他方式生成随机颜色。我尝试使用手写笔的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文件：

---

这是我的手写笔文件：

您可以通过

 var col =  rgb(‘ + 
              (Math.floor(Math.random() * 256)) 
             + ‘,’ + (Math.floor(Math.random() * 256)) 
             + ‘,’  + (Math.floor(Math.random() * 256)) + ‘) ;

或

---

最后，我为一组颜色生成了类，并使用javascript定期随机更改这些类

// css.styl

colors = 0 30 60 90 120 150 180 210 240 270 300 330

for hue, index in colors
  color = hsl(hue, 100%, 75%)
  .bodyColor{index}
    color: lighten(color, 55%) !important
    //background-color: darken(color, 97%) !important
  .borderColor{index}
    border-color: darken(color, 65%) !important
  a.linkColor{index}, a.linkColor{index}:visited
    color: lighten(color, 85%)
  .containerColor{index}
    background-color: color !important
  a.buttonColor{index}
    color: darken(color, 75%) !important
    background-color: lighten(color, 25%)
  a.buttonColor{index}:hover
    background-color: darken(color, 50%)
    color: lighten(color, 85%) !important

---

---

我知道这是一个非常晚的回答，但值得记录的内容永远不应该被忽略-正如您所指出的，问题是触笔正在接收字符串，而它应该接收RGB或HSL颜色节点

手写笔中的字符串如下所示：

'text'

，当它们被编译为CSS时，它们被编译为原样。您需要呈现纯CSS文本，而不是字符串

手写笔有一个内置函数，可以用来将该字符串转换为纯CSS文本：

unquote（）

因此，您可以简单地从

mainColor=randomColor（）

到

mainColor=unquote（randomColor（））

但是，如果您想保持手写笔干净，可能需要使用手写笔JavaScript API的

节点

对象。如果将函数从JavaScript传递到手写笔，那么最好是返回手写笔节点而不是原始数据类型：

。

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

---

遗憾的是，关于触控笔节点的文档并不多，但您真正需要的只是作为参考。它包含所有可用的节点。

我知道这太晚了，但我通过谷歌偶然发现了这一点，我找到的最简单的解决方案就是这样做：

random(min, max)
  return floor( math(0, "random") * max + min )
randomColorChannel()
  return random(0, 255)
randomColor()
  return rgb(randomColorChannel(), randomColorChannel(), randomColorChannel())

---

getRandomColor

仍会生成相同的错误。手写笔需要某种特殊类型，而不是字符串。我仍然得到了预期的RGB或HSL值，得到了一个字符串#9463B9这会生成一个随机的颜色，但我最初的问题是如何将其传递给手写笔。我感谢您的努力，但我真的认为您没有理解我的问题。你知道Stylus CSS引擎或Node.js吗@AlexFord抱歉，，，，如果你想，请添加你的问题链接我将删除我的答案…不，留下你的答案。我喜欢getRandomColor函数。它没有回答我的全部问题，但仍然很有用。我不确定去年我是怎么错过这个答案的；我通常在所有堆栈通知的顶部。我已把你的答案标为正确答案。我当时不知道自己在做什么。您的解决方案要好得多，是一个真正合适的解决方案。我不知道你可以这样定义手写笔的功能：你会惊讶于你能用手写笔做什么，尤其是由于最近的更新。

// animateColor.js

(function ($) {

  $(document).bind('initialize', function (e) {
    if (!e.firstLoad) return;

    var colorIndex = 3,
      delay = 10,
      items = [
        { element: 'body', cssClass: 'bodyColor' },
        { element: '#banner', cssClass: 'borderColor' },
        { element: 'a', cssClass: 'linkColor' },
        { element: '.translucentFrame', cssClass: 'containerColor' },
        { element: 'a.button', cssClass: 'buttonColor' }
      ];

    $(document).data('colorItems', items);

    (function changeColors() {
      items.forEach(function (item) {
        $(item.element).removeClass(item.cssClass + colorIndex);
      });

      colorIndex = Math.floor(Math.random()*11);
      $(document).data('colorIndex', colorIndex);

      items.forEach(function (item) {
        $(item.element).addClass(item.cssClass + colorIndex);
      });

      setTimeout(changeColors, delay * 1000);
    })();
  });

})(jQuery);

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

random(min, max)
  return floor( math(0, "random") * max + min )
randomColorChannel()
  return random(0, 255)
randomColor()
  return rgb(randomColorChannel(), randomColorChannel(), randomColorChannel())