Structure Of Custom Css/less

We would like to use our custom CSS across all 4 stores. But with some variations.

The idea is to use a small file for each store, maybe 50-100 lines of configuration and a large shared css of a couple of 1000 lines.


Store1 config.file


Store2 config.file


And so on…

In the large_sharedconfigfile(CSS):

The value Maincolor may be used several places. Like a border color, background color, font-color and so on..

Today we have 4 files, containing 99% the same content, except for the first lines witch are CSS LESS definitions for images colors and so on.

This is a slow and old school way of doing it.

So to the question:

What is the best way to make a custom CSS work.. Is it the way we do it today? With css/less files in in the templates / styles / data

Can we use LESS in a smarter way? Is it somehow better use use hooks/extensions in some way, and in what way? Or something completely different?

Can we even split this into more files? To make the editing job later on easier, say having a sepearte less file for the footer, header body, product and so on, then they are all combined into one big css/less file..?

If you do not want to clone theme for each store-front, try the following solution

If you do not want to clone theme for each store-front, try the following solution

Hi. Did you forget to paste something?

I failed to find required post. But in the design/themes/responsive/templates/addons/my_changes/hooks/index/ file you can use the following code

{if $runtime.company_id == 1}
     {style src="addons/my_changes/styles1.less"}
{elseif $runtime.company_id == 2}
     {style src="addons/my_changes/styles2.less"}
     {style src="addons/my_changes/styles3.less"}

where 1,2,3 - IDs of the store-fronts