Structure Of Custom Css/less

Multi-Vendor Questions
1

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.

Example:

Store1 config.file

Maincolor:red

Store2 config.file

Maincolor:blue

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..?

2

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

3

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

Hi. Did you forget to paste something?

4

I failed to find required post. But in the design/themes/responsive/templates/addons/my_changes/hooks/index/styles.post.tpl 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"}
{else}
     {style src="addons/my_changes/styles3.less"}
{/if}

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