0

私はWindows用のLESSコンパイラであるWinLESSを使用しています。では、ディレクティブをstyle.less使用してandなど@importをインポートしています。768up.less1030up.less

コンパイルされたものには、インラインで解析された内容が含まれています。次に例を示しますstyle.css。768up.less1030up.less

style.less

@import "normalize.less";
/* base styling here */
@media only screen and (min-width: 768px) { @import "768up.less"; }
@media only screen and (min-width: 1030px) { @import "1030up.less"; }

style.css

/* imported normalize */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* etc */

/* base styling */
.wrap { margin: 0; padding: 0 5px; } /* etc */

/* imported 768up */
.wrap { padding: 0 20px; }

/* imported 1030up */
.wrap { padding: 0 30px; }

@importこれは、と混合されている目的を打ち負かしません@mediaか？つまり、のファイルサイズは、style.cssインポートされたすべてのファイルとコンパイルされたファイルの合計になります。

1030up画面サイズが小さいためにブラウザが使用できない場合でも、ブラウザstyle.css全体がダウンロードされますか？

コンパイルされたものには変更されていないディレクティブstyle.cssが含まれているはずではないので、より軽量になり、基準が満たされた場合に追加のスタイルを取得するようにブラウザーに指示するだけですか？@importstyle.css@media

WinLESSがこれらのCSSファイルをコンパイルするのは私にとって間違っていますか？

理想的には、次のことを確認したいと思います。

/* normalize */
@import "normalize.css";

/* base styling */
.wrap { margin: 0; padding: 0 5px; } /* etc */

/* progressively enhance styling to accomodate larger screens */
@media only screen and (min-width: 768px) { @import "768up.css"; }
@media only screen and (min-width: 1030px) { @import "1030up.css"; }

どうか、の概念全体を誤解している場合は@import、私に教えてください！

4

1 に答える 1

2

ラウンドトリップを減らすと、通常、サイズを減らすよりもパフォーマンスが向上します。

スプライトシートを使用するのと同じ考え方です。1kbに対して4つの要求を行うことは、20kbに対して1つの要求を行うことよりもはるかに悪いです。

この場合、リクエストを同時に実行することもできません。最初のファイルを取得して解析する必要があります。そうして初めて、サーバーに戻って別のファイルを取得する必要があることに気付きます。

gzipがどのように機能するかも気に留めてください。1kb + 1kb！=2kb。

ファイルを分割したい場合は、.lessの場合にのみインラインに@importが含まれるので、次のことを試してください。

@media only screen and (min-width: 768px) { @import "768up.css"; }
@media only screen and (min-width: 1030px) { @import "1030up.css"; }

（.lessではなく.cssに注意してください）

詳細については、control + fを実行し、http：//lesscss.org/で「インポート」を検索してください。

次のように、インポートタイプを適用できます。

@import (css) "foo.bar";
@import (less) "foo.bar";
于 2013-03-25T22:18:00.720 に答える