HI all, I am very new to LESS, literally just started today. I had a look at some tutorials, and got my first LESS webpage - or should I say CSS - to work in Firefox, but when I moved to other browsers the CSS doesn't pick up any style. SO I re-compiled the CSS again (I am using SimpleLess) but still no browser picks up the styles. I don't think there is anything wrong with the code, it is just a simple page with a few divs and a small css:
<!DOCTYPE html>
<html>
<head>
<title>LESS test</title>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.7.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="normalDiv"><p>This is a div</p></div>
<div class="bigDiv"><p>This is a big div</p></div>
</body>
</html>
CSS style.less here
@myColorSmall:#affaaa;
@myColorBig: #cccccc;
.sample-mixin{
border:1px solid red;
color:red;
margin:5px;
}
@myBorder: 4px solid red;
.normalDiv{
width:200px;
height:200px;
background-color:@myColorSmall;
}
.bigDiv{
width:300px;
height:300px;
background-color:@myColorBig;
}
p{
.sample-mixin;
}
Curiosuly, IE11 in the console says:
SCRIPT5: Access is denied.
File: less-1.7.0.min.js, Line: 13, Column: 5978
IE10 and IE9** work OK**, I can see the styles
IE8 and IE7 (no style shown) kindly notify me that:
SCRIPT438: Object doesn't support property or method 'bind'
File: less-1.7.0.min.js, Line: 13, Column: 27892
Chrome (no style shown) says:
less: XHR: Getting 'file:///C:/Users/.../LESS/style.less' less-1.7.0.min.js:13
XMLHttpRequest cannot load file:///C:/Users/.../LESS/style.less. Cross origin requests are only supported for HTTP. test.html:1
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/.../LESS/style.less'. less-1.7.0.min.js:13
Opera (no styles shown) reports a Unhandled DOMException: NETWORK_ERR error somewhere in here:
"function" == typeof g.overrideMimeType && g.overrideMimeType("text/css"), d("XHR: Getting '" + a + "'", z.debug), g.open("GET", a, h), g.setRequestHeader("Accept", b || "text/x-less, text/css; q=0.9, */*; q=0.5"), g.send(null), y && !w.fileAsync ? 0 === g.status || g.status >= 200 && g.status < 300 ? c(g.responseText) : e(g.status, a) : h ? g.onreadystatechange = function() {
4 == g.readyState && f(g, c, e)
Safari for windows works
ANy idea?
On their website http://lesscss.org/usage/#browser-support they are being a bit cryptic, well that's what I think, they do say something about Function.prototype.bind but they do not say which browser does or doesn't support. Does anybody have any experience with LESS?