Can less variables be compiled to css custom properties? How to merge less code in components into one large .less file?

div{
   @main-color: red;
   color: @main-color;
   border: 1px solid @main-color;
}

compiled out:

div{
    --main-color: red;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

I know that the variable of less can be used not only for the value of the property, but also for the key of the property. But if don't consider the latter, because it is not used in my project, how to achieve the compilation from less variables to css custom properties?
Thanks!

No file, test, or entry point is identified in the issue. First clarify whether the requested Less-to-CSS custom-property compilation is intended as a compiler feature and how the separate component files should be combined; completion would require an agreed behavior and corresponding implementation and tests.