change LESS color variable from JS

Question

I'm trying to assign background colors with JQuery using LESS variables.

The problem does come from using LESS variable because using RGB or hex values works like a charm.

Can we ask LESS to recompile from JQuery or something...?

I am compiling LESS client-side at the moment, for the time of production at least.

$(document).ready(function() {

    $('button:first-of-type').on('click', function() {
        
        // What I can do:
        $("main").css("background-color", 'rgb(154, 155, 234)');
    
        // What I want to do:
        $("main").css("background-color", "@bgColor1");

     }) 

     $('button:nth-of-type(2)').on('click', function() {
        
        // What I can do:
        $("main").css("background-color", "rgb(209, 255, 155)");
        
        // What I want to do:
        $("main").css("background-color", "@bgColor2");
        
     }) 
    
});

// Using LESS here

@bgColor1 : rgb(154, 155, 234);
@bgColor2 : rgb(209, 255, 155);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello friend.</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet/less" type="text/css" href="css/account.less"/>
    <script src="js/less/less.min.js"></script>
    <script src="js/account.js"></script>

</head>
    <body>

        <main>
         
              <button id="btnUpdatePublicName"> color 1 </button>
                    
              <button id="btnChangePassword" type="button"> color 2 </button>
                    
        </main>
    </body>
</html>

Derek Brown · Accepted Answer · 2017-10-16 00:39:11Z

2

I too would love this functionality! The problem is that your LESS code is compiled into CSS, which doesn't have any concept of variables. The easiest solution is to create classes for each of your colors:

.bgColor1{
   background-color: @bgColor1
}

And then add this class using JQuery:

$("main").addClass("bgColor1");

answered Oct 16, 2017 at 0:39

Derek Brown

4,4575 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek Brown · Accepted Answer · 2017-10-16 00:43:03Z

0

Another answer which merits consideration is using a plugin like sass extract (not sure if this applies given you are using less). This would extract variables at compile-type in a structured way.

If you are going to need these variables a lot, it might be work looking into, but would not be as straightforward as just creating classes (like I suggested earlier).

answered Oct 16, 2017 at 0:43

Derek Brown

4,4575 gold badges30 silver badges44 bronze badges

Collectives™ on Stack Overflow

change LESS color variable from JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related