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

StackOverflow https://stackoverflow.com/questions/2132138

  •  22-09-2019
  •  | 
  •  

Вопрос

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

Мой application.less-Файл, который выглядит похожим на этот:

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

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

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

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

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

Это было полезно?

Решение

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

lib.меньше:

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

главное.меньше:

@import "lib";

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

вывод, main.css:

a { color: #0011ff; }

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

Другие советы

МЕНЬШЕ теперь поддерживает @import-once "stylename.less";

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

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

В конфигурации.меньше:

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

В заголовке.меньше:

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top