问题
I have a less file which uses multiple less variable and and a less variable used inside another less variable to calculate darkness and brightness. I need to change thse variables value to change the color from color picker at run time.
Code as
@base: #35414E; // #35414E
@hue-control: contrast(@base, lighten(@base, (100 - lightness(@base)) * (@amount / 100)), darken(@base, lightness(@base) * (@amount / 100)), 50%);
We need to update at rum time and show immediately.
回答1:
example
<!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>
With styles.less:
@body-bg: white;
body {
background-color: @body-bg;
}
来源：https://stackoverflow.com/questions/27246808/less-variable-issue-in-jquery