We have a large ASP.NET MVC application with a large amount of CSS, ~105 distinct files. These files are separated by component, which makes them easier to manage. At runtime, we minify/combine these using a handler.
Additionally, our application utilizes skin settings; the administrator can customize fonts and colors for the site. Those skin settings are injected into CSS files using NVelocity, which although it's old is quite performant.
I'd like to move the CSS to using less, which will allow for more code reuse and cleanliness inside the CSS files. I'm struggling over the best option to do this. My current train of thought is this:
- Administrator makes skin modifications, and saves
- On save the application generates a skin.less file on disc, which is the master less file containing all the variables
- Subsequent CSS files that require less variables do an @import on the skin.less
- less files are processed and minified/combined in a handler, and served down to the client.
My question is, does this seem like the best approach to serving dynamic variables into the less files? Is generating the skin.less file on disc my only option, or can the @import statement reference a handler itself, so there's no need to generate a file on disc?