如何将参数从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 。 这是我的较少代码：

.icona ( @iconcina ){

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

是否有可能以更少的方式从 javascript 传递变量？ 任何人都可以帮助我吗？

Answer 1

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

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

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

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

---

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

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

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

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

Answer 2

LESS 被编译成静态 CSS，因此无法在运行时访问变量或函数。

您可以使用 javascript 使用element.style.(property)为特定的 CSS 属性分配新值，或者使用 CSS 原生变量，这些变量是允许在运行时修改的非常新的东西。

您需要在 CSS 中的 :root 元素中声明它们，然后使用document.documentelement.style.setproperty从 javascript 更改它们

请记住，它们不支持 IE 和某些移动浏览器。

检查此来源以获取更多信息

Answer 3

似乎正如@Quentin所说，在运行时无法将 js 变量传递给.less文件。 绕过这个并实现结果的另一种方法是使用条件、 require()和多个.less文件。 这样你就可以模拟变量：

myLight.style.less

body {
  color: black;
  background-color: white;
}

myDark.style.less

body {
  color: white;
  background-color: black;
}

然后在我们的 javascript 代码中：

myGreat.js

if(myVar === true) {
  require('./myLight.style.less')
}
else {
  require('./myDark.style.less')
}

Answer 4

您是否尝试过使用 jquery 添加属性或类属性，例如这样您可以动态设置类的属性。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

var textH = $(".Text").height();
var vertAlign = ((140 - textH)/2);
var textColor = 'red';
var backColor = 'black';
$(".Text").css({
    'margin-top': vertAlign,
     'color': textColor,
     'background-color': backColor
});

});
</script>
<script>

</script>

<div class="Text ">

hello world

</div>