Преимущество заявленного @import по сравнению с скомпилированным @import в CSS ⇐ CSS

[Anonymous]

Я использую WinLESS, компилятор LESS для Windows. В 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< Директивы /code> не изменились, так что 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, просветите меня!

Подробнее здесь: https://stackoverflow.com/questions/156 ... ort-in-css