Как правильно огранизовать файлы в LESS?

Question

[HeBonpoc]

Верстаю обычный сайт - футер, хидер, зона контента.
LESS у меня сразу компилируется и подключаю на страницы я уже готовые css файлы.
В главном less файле вёрстка хидера, футера, общие переменные (цвета и т. д.) и общие mixin'ы, например стиль кнопки.
Также есть less файл для главной страницы. Мне хочется там использовать переменные и mixin'ы из основного файла. Приходится делать импорт. Тогда css стили из главного файла включаются в страницу уже дважды. Я убираю подключение главного css файла и тогда уже подключается 1 файл css для главной страницы, который уже содержит стили из общего файла. Меня это на какое-то время устроило, пока я не понял, что теперь для каждой внутренней страницы будут грузиться стили для хидера и футера.
Посоветуйте как сделать красиво. Я хочу подключать 2 css файла для каждой страницы как изначально и планировал.

Answer 1

[Иван]

Миксины, переменные и все прочее, что при компиляции превращается в 0 строчек css лучше выносить в отдельные файлы и в нужных местах импортировать.
Структура типа такой:

styles:
    app.less
    variables.less
    mixins.less
    pages:
        home.less
        about.less

В app.less стили, общие для всего сайта, в стилях страниц только то, что нужно конкретной странице. Если в home.less нужны миксины или что-то еще, уже используемое в app.less — импортируете из отдельного файла.

Comments

[Иван]

После компиляции данного примера получится 3 файла: app.css, home.css, about.css

[HeBonpoc]

Я думал сначала так сделать, но подумал что миксины будут компилироваться и включаться в оба файла. Потом прочитал документацию и добавил ко всем миксинам (). Получилось как надо. Спасибо)