2

正如您在此处看到的：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？

4

1 回答 1

3

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

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

于 2013-09-16T12:43:23.290 回答