2

別の質問のおかげで、最近LESSを発見しました。 残念ながら、私がやりたいことをするのに苦労しています。

私の .less ファイルは次のようになります。

#user_box {
    .ui-widget-content;
    .ui-corner-all;
    position: fixed; 
    left: 10px; 
    top: 10px; 
    padding: 5px;
    z-index: 100; 
    height: 40em; 
    width: 16em;
    background-color: white;
}

その特定の div をその jQuery クラスのペアに関連付けようとしています。ただし、機能しません。フォーマットは完全に無視されます。しかし、そのミックスインのペアを削除すると、機能し始めます。(#user_boxもちろん、これら 2 つのクラスがあるかのように扱われる div を差し引いてください。) それは、LESS の JS パーサーがこれらの 2 つのクラスを見つけることができず、中止していると思わせます。

私はこれを間違っていますか、それとも LESS では他の .css ファイルのクラスを mixin として取り込むことができないのでしょうか? FWIW、すべてのjQueryリンク/スクリプト呼び出しの後に、「スタイルシート/レス」リンクとless.jsスクリプトを配置しています。

編集: 数学は、@import ステートメントを使用する必要があることを指摘していますが、まだ苦労しています。.less ファイルは に/team/cssあり、インポートしようとしているファイルは にあります/team/css/custom-theme。次のステートメントはどれも機能しません。

@import "/team/css/custom-theme/jquery-ui-1.8.21.custom.css";
@import "custom-theme/jquery-ui-1.8.21.custom.css";
@import "jquery-ui-1.8.21.custom.css";

<link type="text/css" href="/team/css/custom-theme/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />これは、 が HTML ファイルに含まれている かどうかに関係なく当てはまります。

EDIT 2: また、私はLESSクライアント側をやっています。それが何かに影響するかどうかはわかりません。

4

3 に答える 3

2

現在のスコープ/ファイルで使用したいミックスインを含むファイルをインポート/参照する必要があります。

したがって、ミックスインが で定義されている場合mixins.less、less ファイルは次のようになります。

@import "mixins" /* NOTE THIS IMPORT */

#user_box {
    .ui-widget-content;
    .ui-corner-all;
    position: fixed; 
    left: 10px; 
    top: 10px; 
    padding: 5px;
    z-index: 100; 
    height: 40em; 
    width: 16em;
    background-color: white;
}

現在の LESS ファイルが認識していないファイルからクラスを取得することはできません。ただし、LESS コンパイラを使用してファイルを組み合わせることができるので、他のファイルをインポートする 1 つまたは 2 つのファイルだけで、すべてのクラスを利用できるようになります。

LESS は CSS 拡張子を持つファイルを解析しないことを指摘してくれた @zzzBov に感謝します。LESS でアクセスするルールを含むファイルの拡張子を から.cssに変更する必要があります。.less

于 2012-06-21T18:59:03.313 に答える
0

インポートすると、CSS ファイルはリテラル出力として扱われ、LESS によって解釈されません。

于 2012-06-21T19:38:00.673 に答える
0

私は同じ問題を抱えていたので、これを機能させました。

jqueryUI テーマ ローラーからテーマをダウンロードします。zip 内には、css のフォルダーとテーマの名前があります。「スタート」というテーマを使いました。

.less ファイルの先頭にこれを置きます。

@import "start/jquery-ui-1.10.3.custom.less";

インポートは現在のファイルの場所に基づいていることに注意してください。サーバーのルートにある css という別のフォルダー内に、styles.less ファイルを配置しました。そのため、テーマ フォルダ名「start」がすぐそこにあることが重要です。

HTML 内の jqueryUI テーマ .css への古い参照をすべて削除してください。

「開始」フォルダ内に画像が表示されます。images フォルダーを、styles.less ファイルと同じディレクトリーに移動します。これは重要です。そうしないと、正しく機能せず、エラーが発生します。Google Chrome Inspector->console を使用すると、エラーを確認できます。

最後に、Mathletics が指摘したように、jquery-ui-1.10.3.custom.css ファイルの .css を .less に変更する必要があります (または、あなたの言うことは何でも)。.less と書かれていない限り、インポートされません。

.less の良いところは、{LESS} 関連の構文が使用されていない場合、通常の CSS にフォールバックすることです。

これで、jQuery クラスから Mixins を使用できるようになりました。

これが誰かを助けることを願っています!

于 2013-11-15T10:36:53.707 に答える