CSS 中声明的 @import 与编译的 @import 的好处

Question

我正在使用 WinLESS，一个适用于 Windows 的 LESS 编译器。在

style.less

中，我使用

@import

指令导入我的

768up.less

和

1030up.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

的整个概念，请赐教！

Answer 1

减少往返通常比减少大小更能提高性能。

这与使用精灵表的想法相同。发出 4 个 1kb 请求比发出 1 个 20kb 请求要糟糕得多。

在这种情况下，它甚至无法同时执行请求。它必须获取第一个文件，解析它，然后才意识到它必须返回服务器以获取另一个文件。

还要注意 gzip 的工作原理。 1kb+1kb != 2kb.

如果您怀疑您希望将文件分开，LESS 仅内联包含 @import（如果它是 .less），所以请尝试：

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

（注意 .css 而不是 .less）

可以通过 control+f 找到更多详细信息，在 http://lesscss.org/

上搜索“导入”

您可以强制执行它正在执行的导入类型：

@import (css) "foo.bar";
@import (less) "foo.bar";