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

Question

我使用的是Node.js，我使用的是Stylus的CSS引擎。手写笔是很棒的，除了我似乎不知道如何传递一个颜色变量或以其他方式生成一个随机颜色。我尝试将javascript用于手写笔，但我只是把自己弄糊涂了，而且可能过于复杂了。

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文本，而不是字符串。

手写笔有一个内置函数，您可以使用它将字符串转换为纯文本：unquote()。

这样您就可以简单地将行更改为

mainColor = randomColor()

至

mainColor =引号(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节点上没有太多的文档，但是您真正需要的是这。它包含所有可用的节点。

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