javascript - 如何将参数从javascript传递给less

Question

假设有这个javascript代码:

<div component="user/picture" data-uid="' + post_show.uid + '" class="user-icon icona('+ post_show.icon_bgColor+')" data-original-title="" title="">' + post_show.icon_text + '</div></a></div>

我想传递 icona less 函数变量 icon_bgColor。 这是我的 less 代码:

.icona ( @iconcina ){

     background-color: @iconcina;
     margin-right: 15px;
     border-radius: 50%;
     width: 46px;
     height: 46px;
     line-height: 46px;
     font-size: 2.4rem;
}

是否可以在 less 中从 javascript 传递变量？谁能帮帮我？

Answer 1

通常，LESS 在构建时运行。它生成静态文件，然后将这些文件部署到服务器。

JavaScript 在运行时运行，它从服务器获取 HTTP 响应并对其进行操作。

这意味着它们以严格的顺序运行:LESS 然后 JS。

没有办法在另一个方向传递数据。

---

另一种方法是使用不同的选择器生成不同的规则集，您的每个值:

.icona.foo {
    background-color: black;
}

.icona.bar {
    background-color: white;
}

...然后将这些类名分配给 JavaScript 中的元素。