Less jquery中变量较少的问题_Less

Less jquery中变量较少的问题

less

Less jquery中变量较少的问题,less,Less,我有一个less文件，它使用多个less变量，在另一个less变量中使用一个less变量来计算黑暗度和亮度。我需要更改这些变量的值，以便在运行时从颜色选择器更改颜色代码为 @base: #35414E; // #35414E @hue-control: contrast(@base, lighten(@base, (100 - lightness(@base)) * (@amount / 100)), darken(@base, l

我有一个less文件，它使用多个less变量，在另一个less变量中使用一个less变量来计算黑暗度和亮度。我需要更改这些变量的值，以便在运行时从颜色选择器更改颜色

代码为

@base:                   #35414E;  // #35414E 
@hue-control:            contrast(@base, lighten(@base, (100 - lightness(@base)) * (@amount / 100)), darken(@base, lightness(@base) * (@amount / 100)), 50%);

我们需要在rum时间更新并立即显示。

示例

<!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>

看起来不像是个问题，更像是你没试过？jQuery代码在哪里？问题少了吗？这是一个什么样的问题？

@body-bg: white;
body {
    background-color: @body-bg;
}