CSS-избыточность при использовании LESS и @import

Мне очень нравится идея и концепция LESS. Тем не менее я наткнулся на ошибку, о которой я довольно давно сообщил автору, но еще не получил никакой обратной связи. Может быть, это только я, кто делает что-то неправильно.

My application.less -File, который выглядит примерно так:

@import "reset";
@import "config";
@import "header";
@import "forms";
[…]

Мне нравится, что можно использовать правило @import для разделения моих файлов, чтобы получить лучший обзор моих объявлений css. Тем не менее, каждый импортированный файл должен снова импортировать файл config.less-File, чтобы использовать доступные в нем микшины и переменные.

Бьюсь об заклад, вы уже знаете, о какой избыточности я еду: Каждый раз, когда config.less импортируется, его "вывод" становится частью application.css.

Мой конфигурационный файл содержит около 200 строк кода. Поскольку я разбил свой CSS файл примерно на 5 файлов (на основе имен моих контроллеров), которые должны повторно импортировать конфигурацию, я получаю около 1000 строк сгенерированного CSS-кода, которые на 100% избыточны.

Единственное решение, которое я могу придумать, - это не разделить мои файлы, чего я действительно хотел избежать.

Ответы

Ответ 1

Хотя это и не идеально, практическая причина этого в том, что файлы, которые вы импортируете теоретически, не должны содержать CSS. Как правило, у вас будут переменные и динамические микшины, которые не вносят свой вклад в вывод CSS:

lib.less:

#colors {
    @blue: #0011ff;
    @red: #ee2222;
}
.button (@width: 10px) {...}

main.less:

@import "lib";

a { color: #colors[@blue]; }

вывод, main.css:

a { color: #0011ff; }

#colors {} and .button в этом случае не будет выводиться.

Ответ 2

LESS теперь поддерживает @import-once "stylename.less";

Ответ 3

Возможно, вы можете разделить их в своей среде разработки, а затем объединить их вместе, не требуя всего дополнительного кода, при развертывании на ваш веб-сервер в реальном времени?

Ответ 4

Вы можете использовать динамические микшины в конфигурационном файле LESS, если они объявлены и помечены с использованием $ вместо ..

В config.less:

$mixin
{
  a { color: @light; }
  h2 { //etc.
}

В header.less:

@import "config";
.header
{
  $mixin;
}

Источник. Я также пробовал это, и он работает.