css - 声明的 @import 与 CSS 中编译的 @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"; }

样式.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; }

这不是违背了与@media 混合的@import 的目的吗？我的意思是，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

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

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

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

还要注意 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";