3

Express for Node.jsを使用しており、使用しているCSSエンジンはStylusです。スタイラスペンは素晴らしいですが、色変数を渡す方法やランダムな色を生成する方法がわからないようです。スタイラス用のjavascriptAPIを使用してみましたが、混乱しているだけで、おそらく物事が複雑になりすぎています。

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

4

4 に答える 4

5

これは非常に遅い答えであることを私は知っていますが、文書化する価値のあることは決して無視されるべきではありません-あなたが特定したように、問題は、スタイラスがRGBまたはHSLカラーノードを受信する必要があるときに文字列を受信することです。

スタイラスの文字列は次のよう'text'になります。CSSにコンパイルされると、そのままコンパイルされます。文字列ではなく、プレーンなCSSテキストをレンダリングする必要があります。

Stylusには、その文字列をプレーンなCSSテキストに変換するために使用できる組み込み関数があります。unquote()

だからあなたは単に行を変更することができます

mainColor = randomColor（）

に

mainColor = unquote（randomColor（））

ただし、Stylusをクリーンに保ちたい場合は、StylusJavaScriptAPIの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.
});

残念ながら、スタイラスノードに関するドキュメントはあまりありませんが、参照として本当に必要なのはこれだけです。使用可能なすべてのノードが含まれています。

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

16進数を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 に答える