Question

如您所见：http://codepen.io/MyXoToD/pen/alkmL 我正在尝试将一些javascript函数转换为SASS。一切正常，但这一功能......

我想转换一下：

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每次运行获得随机的不同值？

Answer 1

不，这在任何正确的生产设置中都是不可能的。浏览器只能理解CSS，因此SASS和几乎所有其他CSS预处理器通常运行一次（在服务器上），而不是每次页面加载的客户端。

虽然例如LESS有一个客户端编译器（less.js），但使用它会减慢页面加载过程，通常只适合开发。如果你真的想要动态颜色，可以考虑使用JavaScript构建相关的CSS或保留旧的代码。

SASS random（）总是返回相同的值，为什么？

1 个答案: