2

ここでわかるように: http://codepen.io/MyXoToD/pen/alkmL いくつかの JavaScript 関数を SASS に変換しようとしています。すべてが正常に機能しますが、この1つの機能...

これを変換したい：

var pallete = Math.floor(Math.random() * 210);

$("article h2").each(function(i) {
  var hue = pallete + (i * 15);
  var css = 'background:hsl(' + hue + ',85%,70%); color:hsl(' + hue + ',45%,55%);';
  $(this).attr("style", css);
});

このようなものに：

@for $i from 1 through $articles {
  &:nth-child(#{$i}) {
    $random: random(210);
    $hue: $random + ($i * 15);
    background-color: hsl($hue, 85%, 70%);
    color: hsl($hue, 45%, 55%);
  }
}

この場合の私の問題は、random(210)ページの読み込みごとに常に同じ値を返すことです。実行ごとにランダムから異なる値を取得することは可能@forですか?

4

1 に答える 1

3

いいえ、それは適切なプロダクション セットアップでは不可能です。ブラウザーは CSS のみを理解するため、SASS およびその他のほとんどすべての CSS プリプロセッサーは通常、ページの読み込みごとにクライアントではなく、(サーバー上で) 1 回実行されます。

たとえば、LESS にはクライアント側のコンパイラ (less.js) がありますが、それを使用すると、ページの読み込みプロセスが遅くなり、通常は開発にのみ適しています。本当に動的な色が必要な場合は、JavaScript を使用して関連する CSS を構築するか、古いコードを保持することを検討してください。

于 2013-09-16T12:43:23.290 に答える