从 JS 更改 LESS 颜色变量

Question

我正在尝试使用 LESS 变量为 JQuery 分配背景颜色。

问题确实来自使用 LESS 变量，因为使用 RGB 或十六进制值非常有效。

我们可以要求 LESS 从 JQuery 或其他东西重新编译吗？

我目前正在编译 LESS 客户端，至少在生产时是这样。

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

Answer 1

我也很喜欢这个功能！问题是你的 LESS 代码被编译成 CSS，它没有任何变量的概念。最简单的解决方案是为每种颜色创建 classes：

.bgColor1{
   background-color: @bgColor1
}

然后使用 JQuery 添加这个 class:

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

Answer 2

另一个值得考虑的答案是使用像 sass extract 这样的插件（不确定这是否适用，因为您使用的较少）。这将以结构化的方式提取编译类型的变量。

如果您非常需要这些变量，可能需要研究一下，但不会像创建类那样简单（就像我之前建议的那样）。

从 JS 更改 LESS 颜色变量

change LESS color variable from JS

jquery

less