1

Dynamically update less variables from javascript using less.modifyVars method. It works fine on chrome but not supported by Firefox and IE-11(i.e. color attribute value does not be applied on firefox and IE-11). Using less.js for compilation, please refer the code and screenshot, I don't know where I did mistake.

// HTML Code

<html>
<head>
<link rel="stylesheet/less" type="text/css" href="css/color.less" />
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/less.js"></script>
<script type="text/javascript">
    less.modifyVars({
        '@color': 'blue'
    });
</script>
</head>
<body>
     <div class="row1" style="width: 250px; height: 250px;">box1</div>
     <div class="row2" style="width: 250px; height: 250px;">box2</div>
</body>
</html>

//LESS Code(color.less)

@color:"red";

.row1
{
background-color:@color;
}
.row2
{
background-color:@color;
}

Error screenshot: "http://s8.postimg.org/ia9ki4nnp/Browser.png"

Improve this question
4
  • am using less.js to compile less file into css Commented Dec 16, 2014 at 4:53
  • better if you compile your LESS code into CSS code, can use crunch crunch link or use less2css package on sublime text editor less2css link Commented Dec 16, 2014 at 5:56
  • I found no problem with your code. You screenshot shows that the less code is not compilled at all. Possible there is a wrong mime type for your .less, see stackoverflow.com/a/12270165/1596547 Commented Dec 17, 2014 at 9:06
  • I already included mime type in "C:\Users\User\Documents\IISExpress\config\applicationhost.config", so only it works on chrome other wise even chrome is also not supported by less. Commented Dec 18, 2014 at 5:50
Related questions
5
Retrieve or set LESS variable from JavaScript?
1
LESS - set variables on the client side
2
variable manipulation in Less
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.