How to properly organize files in LESS?

Question

Less

I'm building a regular website - footer, header, content zone.
LESS compiles immediately for me and I include ready-made css files on the pages.
In the main less file, the layout of the header, footer, general variables (colors, etc.) and general mixins, such as button style.
There is also a less file for the main page. I want to use variables and mixins from the main file there. You have to do an import. Then css styles from the main file are included in the page already twice. I remove the connection of the main css file and then 1 css file for the main page is already connected, which already contains styles from the general file. This worked for me for a while, until I realized that now for each internal page styles for the header and footer will be loaded.
Advise how to make beautiful. I want to include 2 css files for each page as originally planned.

Answer 1

Mixins, variables and everything else that turns into 0 css lines during compilation is better to take out into separate files and import them in the right places.
The type structure is like this:

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

In app.less , styles that are common to the entire site, in page styles, only what a particular page needs. If home.less needs mixins or something else already used in app.less, import from a separate file.