CODEWITHSUNDEEP
less
Masihur Rahman
Masihur Rahman

Reputation: 9

Less variable issue in jquery

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.

Upvotes: 0

Views: 119

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

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;
}

Upvotes: 1

Related Questions