使用jQuery加载LessCSS

时间:2012-07-21 19:13:39

标签: javascript jquery html less

我正在使用LessCSS从Google代码加载jQuery,并希望访问LessCSS' Parser()使用less.Parser

我可以通过攻击<link rel>中的<head>标记来加载LessCSS w / jQuery;但是加载style.less两次。我宁愿加载style.less并使用toCSS动态插入它。这样做似乎需要调用less.Parser

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

如何使用LessCSS动态加载jQuery


问题的原始代码

<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更流利的Python;如果我不知何故错过了基本的js概念,请提前道歉。


Patrick回答后的修改后的代码

<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>

1 个答案:

答案 0 :(得分:4)

<强>更新

我认为问题在于您将Parser称为函数,而不是对象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/