10

ページの読み込み後に、1 つ少ないシート を読み込む方法があるかどうか疑問に思っています。This questionには、すべてのシートをリロードする方法を説明する回答がありますが、私のユースケースでは、既存のシートが新しくロードされたシートに依存することはなく、シートを遅延して追加するだけでよいでしょう。みたいなことを考えている

less.sheets.push(mySheet);
less.loadStyleSheet(mySheet);

可能性のある API を表す可能性がありますか? 乾杯、

コリン

2010 年 12 月 3 日更新:

私は Livingston Samuel による less.js コードベースの修正を試してみましたが、機能しているものの、既に読み込まれているスタイルシートの定義を認識しないようです。ここに私のサンプルファイルがあります

を。index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Simple</title>

  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
  <script src="/static/js/less-1.0.40.js"></script> 
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="abc"><div>Bingo</div></div>
</body>

<script>
console.log("loading new sheet");
less.loadStyleSheet("/static/less/style2.less", function() {
    console.log("Loaded!"); 
});

console.log("called");

</script>
</html>

b. style.less

@primary_color: green;

.rounded(@radius: 5px) {  
  -moz-border-radius: @radius;  
  -webkit-border-radius: @radius;  
  border-radius: @radius;  
}

#container {
  background: @primary_color;
  .rounded(5px);

  div {
    color: red;
  }
}

c. style2.less

#abc {
  background: @primary_color;
  .rounded(10px);

  div {
    margin: 2px;
    color: blue;
  }
}

したがって、2 番目のスタイルシートは遅延ロードされますが、style2.less で次の解析エラーが発生します。

".rounded は定義されていません"

.rounded は style.less で定義されており、そのシートをアンロードしていないので、現在の環境のコンパイラで引き続き使用できるはずだと考えていました。

別の言い方をすれば、新たに開始したり、既存の定義をアンロードしたりしたくはありませんが、既にロードされているスタイルに基づいて構築します。ありがとう、

コリン

4

6 に答える 6

5

上記の説明ではこれを理解できなかったので、独自の説明を提供します。

それではまず。ページの読み込み後に Less スタイルシートを読み込みます。このようなもの：

$('head').append('<link rel="stylesheet/less" href="path/to/yourDynamicStyles.less" />');

偉大な。次に、スタイルシートを選択して、Less.js が既に持っているシートのコレクションにプッシュします。DOM オブジェクトが必要なので、jQuery セレクターを使用しました。

less.sheets.push($('link[href="path/to/yourDynamicStyles.less"]')[0]);

誰かがそれを行うためのより良い方法を知っているなら、私に教えてください。(正しいものにするために [0] を追加する必要がありました。) コンソールでこれを行うと、数値が返されます。その数はあまり知られていないシートの数であるため、ページの読み込み時にすでに持っていたものよりも 1 高い数値が返されることを願っています。

次の部分は簡単です。Less.js に、あまり良くないシートをすべてリロードするように指示します。これには、スタックに追加したばかりのシートが含まれます。

less.refresh();

そして、そこに行きます。これで、スタイルシートが動的に読み込まれ、Less にコンパイルするように指示されたはずです。お役に立てれば。

于 2012-03-09T17:46:05.457 に答える
3

私自身のニーズに合わせてMatthewForrの回答を採用しました：

$.each(['/css/style1.less', '/css/style2.less'], function (index, fileName) {
    var $sheet = $('<link />', {
        href: fileName,
        rel: 'stylesheet/less',
        type: 'text/css'
    }).appendTo('head');
    less.sheets.push($sheet[0]);
});
less.refresh();
于 2012-11-15T18:07:39.133 に答える
3

less.jsローカル スコープに関数loadStyleSheetがあり、少ないスタイルを動的にロードして解析する (遅延ロード) ために使用できます。

唯一の問題は、関数が定義用に作成されたクロージャにあるless.jsため、コードから関数にアクセスできないことです。

たぶん、APIを拡張することで公開できます。

アップデート：

less.js@ https://github.com/livingston/less.jsの分岐バージョンを作成しました

このバージョンを使用すると、メソッドを使用して任意のスタイルシートをロードできますless.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

また、実際のライブラリにプル リクエストを送信しました。私の変更が受け入れられることを願っています。

于 2010-12-02T12:26:09.870 に答える
1

または、.lessスタイルシートをその場で.cssに変換するサーバー側のコードを作成することもできます。クライアントからは、他の.cssスタイルシートであるかのように遅延してロードします。これはhttp://www.dotlesscss.org/で使用されているアプローチですが、.lessのどのフレーバーでも使用できます。

多分あなたが探しているものではないかもしれませんが、それは私が思ういくつかのオプションです。

于 2010-12-05T21:14:11.040 に答える
-2

DOM に新しいスクリプト タグを追加するだけです。その後、ダウンロードされて実行されます。

function addScript (id, url)    //  Adds scripts to the DOM
{
    var s = document.createElement('script');
    s.id = id;
    if (url)    s.src=url;
    s.type='text/javascript';

    document.getElementsByTagName('head')[0].appendChild(s)
    return s;
}

これは私が自分のサイトで使用しているものですが、解析時に呼び出します。遅延ローダーとして使用するには、それを呼び出すonloadか、同様の方法で問題なく動作するはずです。

于 2010-11-26T02:22:13.140 に答える