如何使用 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
这是我的手写笔文件：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.
});

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

Answer 2

你可以通过

生成随机颜色

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

或

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

并将十六进制转换为 rgb

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

Answer 3

我最终为一组颜色生成了类，并使用 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

---

// 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);

Answer 4

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

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