CSS-Избыточность при использовании LESS и его @import
Вопрос
Мне действительно нравится идея и концепция Меньше.Тем не менее, я наткнулся на ошибку, о которой некоторое время назад сообщил автору, но пока не получил никаких отзывов.Может быть, это только я делаю что-то не так.
Мой 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;
}
Источник.Я тоже пробовал это, и это работает.