CODEWITHSUNDEEP
csssassless
72GM
72GM

Reputation: 3124

CSS manage different colour schemes for 2 sites

I have 2 fairly large sites that are structurally the same but will have different branding. What would be the best way to structure/build my CSS to avoid a maintenance nightmare through duplicating files?

For example if i have 2 css files like site-1 and site-2 that are generated from 2 less files that contain the different branding I could load the correct file based on the site that is running. I will, however, still have to make any changes twice in 2 different files/add new stuff to 2 different places etc.

Is there any way to avoid this?

To be a bit more specific:

I want something like the following:

Two variable less files (colours1 and colours2) and one site file (site-structure say).

The variables in each variable file would be called exactly the same thing.

I would then have site1 and site2 less files. In site1 i would have 2 import statements import site-structure and import colours1. That is all no actual class statements as these are just for generating.

The import of the colours file would overrite the colours in site-structure file so i have a generated site1 file that is branded with colours1.

Likewise for colours2.

Then I only ever have to add any changes to 1 file (site-structure) and regenerate my site1 and site2 files

The problem is that I would need to import the variables file into the site-structure file to get it to compile.

So i guess my question could be is there a way to do this override in Less/Sass or is there a better way to do it?

Thanks

Upvotes: 0

Views: 76

Answers (2)

Michele Ricciardi
Michele Ricciardi

Reputation: 2117

I worked with a similar set-up before, we were using LESS.

We had 2 main .less files where each one of them was importing a "variable" file for the specific site. e.g. site1.less imports variables-site1, site2.less imports variables-site2.

This means you will have 2 compiled CSS files, which you can use for both your sites respectively.

EDIT: Here an example: https://plnkr.co/edit/HcGRVgFdm1LfxQOCdGY0?p=preview You can change the link tag in the example from:

<link rel="stylesheet/less" type="text/css" href="site1.less" />

to:

<link rel="stylesheet/less" type="text/css" href="site2.less" />

to see the change in the page.

in the example you have the following files:

--site1.less
 -var1.less

--site2.less
 -var2.less

--shared.less

content of site1.less:

@import "var1";
@import "shared";

content of site2.less:

@import "var2";
@import "shared";

content of shared.less:

h1{
  color: @header-colour;
}

This way you have all the shared content in the shared.less, the site1 and site2 files are only entry points for building files and var1 and var2 are your variable files.

Hope this helps

Upvotes: 1

Clyde Lobo
Clyde Lobo

Reputation: 9174

You can have one main.less file and have two site1.less and site2.less.

In these files you define your color variable and import the main.less file after that

@main_color: #aabbcc;
@secondary_color: #aabbdd;
@tertiary_color: #abcdee;
.
.
.
@import "path to main.less"

This way, you can keep on making edits only to the main.less file and if required just change the color variables in the site .less files

Upvotes: 0

Related Questions