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减少函数变量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和某些移动浏览器的支持。

检查this source了解更多信息

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>

如何将参数从javascript传递到较少

4 个答案: