3

我使用 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

4

4 回答 4

5

我知道这是一个非常晚的答案，但值得记录的东西永远不应该被忽视 - 正如您所发现的，问题是 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。它包含所有可用的节点。

于 2013-05-29T08:33:06.933 回答
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;
}
于 2012-12-20T15:06:07.877 回答
0

我最终为一组颜色生成了类，并使用 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);
于 2013-02-28T20:07:47.117 回答
0

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

random(min, max)
  return floor( math(0, "random") * max + min )
randomColorChannel()
  return random(0, 255)
randomColor()
  return rgb(randomColorChannel(), randomColorChannel(), randomColorChannel())
于 2018-01-29T01:09:41.007 回答