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
这是我的Stylus文件：https://gist.github.com/4345839

Answer 1

我知道这是一个非常晚的答案，但是值得记录的内容永远不应该被忽略 - 正如您所指出的那样，问题是Stylus正在接收一个字符串，当它应该接收RGB或HSL颜色节点时。 / p>

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

并将hex转换为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())

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

编辑：

4 个答案: