5

我正在使用jQuery从 Google 代码加载LessCSS ，并希望通过使用来访问LessCSS对象。Parser()less.Parser

我可以通过hack中的标签来使用jQuery来加载LessCSS；但是加载两次。我宁愿加载并使用动态插入它。这样做似乎需要调用.<link rel><head>style.lessstyle.lesstoCSSless.Parser

目前下面的代码不会插入css；我认为这是因为我没有为Parser该类使用正确的命名空间。

如何使用jQuery动态加载LessCSS？

问题的原始代码

<script type="text/javascript" id="less_hack">
    // Load LessCSS javascript
    var less_file="/style.less";
    $(function() {
        var css="";
        $.getScript("toCSS.js")
        $.getScript("http://lesscss.googlecode.com/files/less-1.3.0.min.js",function(){
          $.get(less_file,function(data){
            new(less.Parser)().parse(data,function(e,tree){
              css = tree.toCSS();
            });
          });
        });
    });
    // $('head').append('<link rel="stylesheet/less" type="text/css" href="'+less_file+'">');
</script>

我的 Python 比 JavaScript 更流利；如果我以某种方式错过了基本的 js 概念，请提前道歉。

帕特里克回答后修改的代码

<head>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript">
    // Load LessCSS javascript
    var less_file="http://www.mysite.local/style.less";
    $(function() {
        var css="";
        $.getScript("http://lesscss.googlecode.com/files/less-1.3.0.min.js",function(){
          $.get(less_file,function(data){
            var parser = new(less.Parser);
            parser.parse(data, function (err, tree) {
                if (err) { return console.error(err) }
                css = tree.toCSS();
                // Insert rendered css inline
                $("<style/>").html(css).appendTo("body");
            });
          });
        });
    });
</script>
</head>
4

1 回答 1

4

更新：

我认为问题在于您将 Parser 作为函数调用，而不是 object new(less.Parser)()。

将您的代码修改为：

var less_file="/style.less";
$(function() {
    var css="";
    $.getScript("http://lesscss.googlecode.com/files/less-1.3.0.min.js",function(){
      $.get(less_file,function(data){
        var parser = new(less.Parser);
        parser.parse(data, function (err, t) {
            if (err) { return console.error(err) }
            css = t.toCSS();
            $("<style/>").html(css).appendTo("body");
        });            
      });
    });
});

在此处查看工作版本：http: //jsfiddle.net/E6hsC/

于 2012-07-21T19:27:12.790 回答