更改从LESS颜色变量从JS

我想分配使用LESS变量的JQuery背景颜色。更改从LESS颜色变量从JS

问题确实来自使用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>

来源

2017-10-16 FelDev

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

.bgColor1{ 
    background-color: @bgColor1 
}

，然后使用添加这个类的JQuery：

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

来源

2017-10-16 00:39:11

其中值得考虑使用插件像sass extract（不知道另一个答案这适用于您使用较少）。这将以结构化的方式在编译类型中提取变量。

如果你将需要很多这些变量，它可能是工作期待，但不会像创建类（就像我之前建议的）那样直截了当。

来源

2017-10-16 00:43:03

更改从LESS颜色变量从JS

回答

相关问题