Мне действительно нравятся идея и понятие МЕНЬШЕ. Все же я наткнулся на ошибку, о которой я сообщил долгое время назад автору, но еще не получил обратной связи. Возможно, это - просто я, кто делает что-то не так.
Мой 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% избыточны.
Только решение, которое я могу предложить, не состоит в том, чтобы разделить мои файлы, чего мне действительно нравится избегать.
Несмотря на то, что не идеально, практическая причина для этого является то, что файлы, которые вы импортируете теоретически, не должны содержать какие-либо 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?