我有使用多个较少变化和较少文件和内部另一个较少变量用来计算黑暗和亮度的变化较少。 我需要改变thse变量值改变从颜色选择器的颜色在运行时。
守则
@base: #35414E; // #35414E
@hue-control: contrast(@base, lighten(@base, (100 - lightness(@base)) * (@amount / 100)), darken(@base, lightness(@base) * (@amount / 100)), 50%);
我们需要在糖酒会时间更新并立即显示。
例
<!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;
}
