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"

sona
  • 123
  • 3
  • 13
  • am using less.js to compile less file into css – sona Dec 16 '14 at 04:53
  • better if you compile your `LESS` code into `CSS` code, can use crunch **[crunch link](http://crunchapp.net/)** or use less2css package on sublime text editor **[less2css link](https://github.com/timdouglas/sublime-less2css)** – rasah_dipikir_jerojero Dec 16 '14 at 05: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 http://stackoverflow.com/a/12270165/1596547 – Bass Jobsen Dec 17 '14 at 09: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. – sona Dec 18 '14 at 05:50

0 Answers0