5

jQueryを使用してGoogleCodeからLessCSSを読み込んでおり、を使用してLessCSSのオブジェクトにアクセスしたいと考えています。Parser()less.Parser

;のタグをハッキングすることで、jQueryを使用してこのロードをLessCSSにすることができます。ただし、それは2回ロードされます。むしろロードして動的に挿入するために使用したいと思います。そのためには、を呼び出す必要があるようです。<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>

私はJavaScriptよりもPythonに精通しています。どういうわけか基本的な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

アップデート：

問題は、パーサーをオブジェクトではなく関数として呼び出していたことだと思います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 に答える