1
私は、LESS変数を使用してJQueryで背景色を割り当てようとしています。JSからの可変色変数を変更
RGBまたは16進値を使用すると魅力的に機能するため、問題は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>