如何将参数从javascript传递到less

Question

Suppose to have this javascript code:

<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>

I want pass icona less function the variable icon_bgColor . This is my less code:

.icona ( @iconcina ){

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

Is it possibile pass a variable from javascript in less? Anyone can help me?

Answer 1

Typically, LESS runs at build time. It generates static files which are then deployed to the server.

JavaScript runs at runtime, it takes the HTTP responses from the server and acts on them.

This means that they run in a strict order: LESS then JS.

There is no way to pass data in the other direction.

---

An alternative approach would be to generate different rulesets with different selectors, which each of your values:

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

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

… and then assign those class names to elements in JavaScript.

Answer 2

LESS gets compiled into static CSS, so there's no way to access variables or functions at runtime.

You can either use javascript to assign new values to specific CSS properties with element.style.(property) , or use CSS native variables which are pretty new thing that allows to be modified at runtime.

You need to declare them at the :root element in CSS, then change them from javascript with document.documentelement.style.setproperty

Bear in mind they lack support for IE and some mobile browsers.

check this source for more info

Answer 3

It seems that as said @Quentin there is no way to pass a js variable to .less file in the run time. Yet another approach to bypass this and to achieve a result is to use conditions, require() and multiple .less files. This way you emulate variables:

myLight.style.less

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

myDark.style.less

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

and then in our javascript code:

myGreat.js

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

Answer 4

Have you tried adding an attribute or class property using jquery eg This way you can dynamically set the properties of the class.

<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>