我有一个较少的文件，它使用多个较少的变量，并且在另一个较小的变量中使用较少的变量来计算暗度和亮度。我需要更改变量值以在运行时更改颜色选择器的颜色。
代码为
@base: #35414E; // #35414E
@hue-control: contrast(@base, lighten(@base, (100 - lightness(@base)) * (@amount / 100)), darken(@base, lightness(@base) * (@amount / 100)), 50%);
我们需要在朗姆酒时间更新并立即显示。
答案 0 :(得分：1)
示例
<!DOCTYPE html>
<html>
<head>
<title>Less</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
</head>
<body>
<button class="color-button">Change background</button>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var colors = ['red','blue','yellow','green','black' ];
$('.color-button').on('click', function () {
less.modifyVars({ 'body-bg' : colors[Math.floor(Math.random() * colors.length )] });
less.refreshStyles();
});
</script>
</body>
</html>
使用styles.less：
@body-bg: white;
body {
background-color: @body-bg;
}