获取加载的LESS文件并按需编译

时间:2013-07-15 15:07:51

标签: less

我正在尝试编译一小部分LESS部分代码,并将其与已在页面中编译的较大代码混合。

我认为有一些方法可以重复使用已编译的更少或者可能再次加载它,将它与新代码混合,然后在页面中混合编译。

我想以某种方式加载它,如下例所示:

var runtime_less = '@bg:red; .selector { background-color:@bg; }';
var library_less = '@var:bla bla bla...';

var library_parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'css/full_library.less' // Specify a filename, for better error messages
});

frontsize_parser.parse('', function (e, tree) {
    library_less = tree;
});

var runtime_parser = new(less.Parser)({});
runtime_parser.parse(library_less, function (e, tree) {
    // this should be inside some load event
    $("#container-style").text(library_less.toCSS() + ' ' + tree.toCSS());
});

是否存在某种方式来使当前页面加载LESS文件并以某种方式处理它?<​​/ p>

或者确实存在一些方法来加载LESS个文件,然后将LESS数据与带有其他LESS代码的字符串混合在一起?

1 个答案:

答案 0 :(得分:0)

t.less包含:

@color: lightgreen;

您可以使用以下代码:

<link type="text/css" href="t.less" rel="stylesheet/less">
<script>

less = { 
    env: "development"
};
</script>  
<script src="/less.js/dist/less.js"></script>
<script>
var tmp = less.parse;
less.parse = function(input,option,callback) {
tmp(input + ' h1 {color:@color;}',option,callback);
}
less.refreshStyles();   
</script>