更新
正如@ertrzyiks在评论中已经指出的那样,你应该将Less.parse替换为less.render for Less v 2.x:
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
var options = {}
lessCode = xmlhttp.responseText;
less.render(lessCode, options, function (error, output) {
if(!error) {
document.getElementById('lesscode').innerHTML = output.css;
}
else document.getElementById('lesscode').innerHTML = '' + error + '';
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
但是因为Less v2:
In the browser, less.pageLoadFinished will be a promise, resolved when
less has finished its initial processing. less.refresh and
less.modifyVars also return promises.
编译filename.less时,已编译的CSS代码已注入id为less:filename的样式标记,因此要获得编译的CSS代码,您还可以使用:
less.pageLoadFinished.then(
function() {
console.log(document.getElementById('less:filename').innerHTML);
}
);
请注意,最后一个示例也在页面上应用已编译的CSS代码.
– 更新
我期望运行以下内容是可能的:
css = less.tree.toCSS();
console.log(css);
不幸的是,这不起作用,但您可以使用以下代码来获得您想要的:
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
lessCode = xmlhttp.responseText;
new(less.Parser)().parse(lessCode, function (e, tree) {
document.getElementById('lesscode').innerHTML = tree.toCSS().replace(/\n/g,"
");
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
在HTML的正文部分中: