使用 JQuery 将值写入 SASS 的“减轻”方法 [重复]答案

【问题标题】：Using JQuery to write a value into SASS's "lighten" method [duplicate]使用 JQuery 将值写入 SASS 的“减轻”方法 [重复]
【发布时间】：2023-03-24 11:10:02
【问题描述】：

我打算让几行矩形在页面的下方垂直堆叠在一起，并且我希望每个矩形（实际上是一个 div）随着它们沿着页面向下移动而逐渐变亮。

这里是 codepen.io 链接： http://codepen.io/Chiz/pen/gpNRMj

另外，这是我的 HTML：

<div></div>

还有我的 CSS（使用 SASS）：

div
{
  width:100%;
  height:70px;
  background-color:lighten(blue,0%);
  border:1px solid white;
  margin:-1px 0;
}

还有我的 jQuery：

var l;
var ccolor;

for(var i = 0; i <=10; i++)
{
    l = $("<div></div>");
    ccolor = i * 7;
    $(l).css("background-color", "lighten(ccolor");
    $("html").append(l);
}

我认为问题出在“lighten(ccolor”)”部分，因为我认为 ccolor 变量被写为文本，而不是实际变量。这就是为什么 div 不会随着页面的向下而变浅，而是所有 div 都是同一种颜色。

我该如何解决这个问题？谢了！

【问题讨论】：

我相信 SASS 是预编译的。（即在服务器上）。 JavaScript（在客户端浏览器中运行）将在前端执行并将属性background-color: lighten(ccolor 添加到<div> 标记。该值无效，因此该属性将被忽略。我不认为你可以在客户端上做你想做的事情......
你应该在你的 sass 文件中创建 10 个类，然后为每个 div 分配一个类名。

标签： jquery html css sass

【解决方案1】：

解决变量问题。应该这样写：

var l;
var ccolor;

for(var i = 0; i <=10; i++)
{
    l = $("<div></div>");
    ccolor = i * 7;
    $(l).css("background-color", "lighten(" + ccolor + ")");
    $("html").append(l);
}

然而，War10ck 的评论是正确的。由于 SASS 是在服务器上编译的，因此您实际上需要一个 JS 函数来计算新颜色。我建议看看这个问题 - Programmatically Lighten or Darken a hex color (or rgb, and blend colors)

【讨论】：