So I understand that a similar question has been asked somewhat before : Structure a stylesheet to manage skins or themes Although I think due to kapsula not being able to articulate (him/her)self properly it was deemed unclear.
I am working on a large project with mulitple CSS/LESS files. We have broken up a lot of the monolithic CSS files into individual ones for CSS specific to certain pages as well as common CSS files for common elements on each page (menus, image placeholders, etc..)
We would like to incorporate multiple themes for the project so we decided upon the following structure:
In the base directory we have all the CSS/LESS specific to all the pages in project, except the colours which we set in the theme directories which are situated within the base directory.
So it looks something to the effect of this:
-CSS
- ORANGE [directory]
-> classic.less
-> controls.less
-> classic.less
-> controls.less
Inside the classic.less file in the ORANGE directory we simply insert the directive @import "../classic.less" and upon saving the file our CSS is generated with all our lovely colour themeing as stipulated in the ORANGE->classic.less file.
So while this process has saved a little bit of work in terms of management of the files, every time I make a change in base directory (maybe i added a new element type to the front end) I have to go into each LESS file that inherits from it and save it again in order for the new CSS to be generated.
Is there a more efficient way of doing this? Or am I looking at doing themeing in an incorrect manner. Should I illustrate what I am trying to do a little bit more?