Less variable issue in jquery

Question

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.

Seems less like an issue and more like you haven't tried? Where is the jQuery code? — mikedidthis
– mikedidthis, Commented Dec 2, 2014 at 10:47

Bass Jobsen · Accepted Answer · 2014-12-03 14:21:41Z

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

answered Dec 3, 2014 at 14:21

Bass Jobsen

49.1k16 gold badges147 silver badges226 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Less variable issue in jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related