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，它没有任何变量概念。最简单的解决方案是为每种颜色创建类：

.bgColor1{
   background-color: @bgColor1
}

然后使用JQuery添加此类：

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

Answer 2

另一个值得考虑的答案是使用像sass extract这样的插件（不确定这是否适用，因为你使用的更少）。这将以结构化方式在compile-type中提取变量。

如果您需要这些变量很多，可能需要调查，但不会像创建类那样简单（就像我之前建议的那样）。

从JS更改LESS颜色变量

2 个答案: