所述@import與編譯的@import在CSS中的好處

Question

我正在使用Windows的LESS編譯器WinLESS。在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

減少往返行程通常比減小尺寸更能提高性能。

這與使用精靈表是一樣的想法。要求1kb的4個請求要比提出1個20kb的請求差很多。

在這種情況下，它甚至不能同時執行這些請求。它必須得到第一個文件，解析它，然後才意識到它必須返回到服務器以獲取另一個文件。

還要介紹gzip是如何工作的。 1kb + 1kb！= 2kb。

如果你懷疑你在哪裏，你寧願保留文件分割的情況是，僅少直列包括@import如果它是一個.LESS，所以嘗試：

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

（注意的CSS而不是.LESS）

更多細節可以通過做控制+ F可以發現，搜索「導入」上http://lesscss.org/

您可以強制它在做什麼樣的進口類型：

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