0

我正在使用 WinLESS，一个适用于 Windows 的 LESS 编译器。在style.less中，我正在使用@import指令来导入我的768up.lessand1030up.less等。

编译style.css的具有内联的内容768up.less和1030up.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后的指令是否不应该@import保持不变，从而变得更加轻量级，并且如果满足条件，则style.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

Reducing round trips generally improves performance more than reducing sizes.

It's the same idea as using sprite sheets. Making 4 requests for 1kb is a lot worse than making 1 request for 20kb.

In this case, it can't even do the requests concurrently. It must get the first file, parse it, and only then does it realize it must go back to the server to get another file.

Also mind how gzip works. 1kb+1kb != 2kb.

If you suspect you're in a case where you'd rather keep the files split, LESS only inline includes @import if it's a .less, so try:

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

(note the .css instead of the .less)

More details can be found by doing a control+f, search for "Importing" on http://lesscss.org/

You can enforce the import type it's doing like:

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