Дублирование CSS при использовании МЕНЬШЕ и его @import
Мне действительно нравятся идея и понятие МЕНЬШЕ. Все же я наткнулся на ошибку, о которой я сообщил долгое время назад автору, но еще не получил обратной связи. Возможно, это - просто я, кто делает что-то не так.
Мой application.less- Файл, который выглядит подобным этому:
@import "reset";
@import "config";
@import "header";
@import "forms";
[…]
Мне нравится этот, возможно использовать @import управляйте для разделения моих файлов для получения лучшего обзора моих объявлений CSS. Все же каждый импортированный файл должен повторно импортировать config.less-файл снова, чтобы смочь использовать mixins и переменные, которые я определил там.
Я держал пари, что Вы уже знаете о том, в каком дублировании я являюсь ведущим: Каждый раз config.less импортируется, его "вывод" становится частью application.css.
Мой файл конфигурации содержит приблизительно 200 строк кода. Так как я разделил свой CSS - приблизительно на 5 файлов (на основе моих названий контроллера), который должен повторно импортировать конфигурацию, я заканчиваю тем, что имел приблизительно 1 000 строк сгенерированного кода CSS, которые на 100% избыточны.
Только решение, которое я могу предложить, не состоит в том, чтобы разделить мои файлы, чего мне действительно нравится избегать.
2 ответа
Несмотря на то, что не идеально, практическая причина для этого является то, что файлы, которые вы импортируете теоретически, не должны содержать какие-либо 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 {} и .Button не будет выведен в этом случае.
Может быть, вы можете разделить их в своей среде разработки, а затем объединить их вместе, не требуя всех дополнительных кодов, когда вы развертываете на ваш Live Web Server?