Scenario:
I have a main stylesheet called main.less and another one specifically for a section of the site named app.less. Additionally, I am using Twitter Bootstrap. In main.less, I have made some overrides for Bootstrap, and in app.less, I want to use a mixin from Bootstrap's classes (let's say .clearfix) to keep my code DRY. To achieve this, I will import bootstrap.css into app.less and apply the necessary mixin. When rendering the web page, I will first include Bootstrap and other libraries, followed by main.less, and then app.less. This method helps in keeping the overrides in main.less organized and prevents any messiness.
What is the best approach for handling such imports? Can this be achieved with various CSS preprocessors, not just LESS?