CSS управляет различными цветовыми схемами для 2 сайтов

Question

У меня есть 2 довольно крупных сайта, которые структурно одинаковы, но будут иметь разный брендинг. Какой был бы лучший способ структурирования/сборки моего CSS, чтобы избежать кошмара обслуживания путем дублирования файлов?

Например, если у меня есть 2 css-файла, такие как site-1 и site-2, которые генерируются из 2 меньше файлов, содержащих различный брендинг, я могу загрузить правильный файл на основе работающего сайта. Тем не менее, мне все равно придется дважды вносить изменения в 2 разных файла/добавлять новые материалы в 2 разных местах и ​​т. Д.

Есть ли способ избежать этого?

Чтобы быть немного более конкретно:

Я хочу что-то вроде следующего:

Два переменных меньше файлов (colours1 и colours2) и один файл сайта (сайт-структуры говорят).

Переменные в каждом файле переменных будут называться точно такими же.

У меня тогда было бы site1 и site2 меньше файлов. В site1 у меня было бы два импортных оператора импорта структуры сайта и импорта colours1. Это не все фактические утверждения класса, поскольку они предназначены только для генерации.

Импорт файла цветов будет переопределять цвета в файле структуры сайта, поэтому у меня есть сгенерированный файл site1, который заклеймен с помощью colours1.

Аналогично для colours2.

Тогда я только когда-либо добавлять какие-либо изменения в 1 файл (сайт-структуры) и восстановить мою site1 и site2 файлы

Проблема заключается в том, что мне нужно импортировать переменные файла в файл сайта-структуры чтобы заставить его скомпилировать.

Так что я думаю, мой вопрос может быть, есть способ сделать это переопределить в Less/Sass или есть лучший способ сделать это?

Благодаря

Answer 1

Я работал с подобной настройки перед тем, что мы использовали LESS.

У нас было 2 основных файла .less, где каждый из них импортировал «переменный» файл для определенного сайта. , например. site1.less импорт variables-site1, site2.less импорт variables-site2.

Это означает, что у вас будет 2 скомпилированных CSS-файла, которые вы можете использовать для обоих сайтов соответственно.

EDIT: Вот пример: https://plnkr.co/edit/HcGRVgFdm1LfxQOCdGY0?p=preview Вы можете изменить ссылку метку в примере из:

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

к:

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

, чтобы увидеть изменения на странице.

в примере вы имеете следующие файлы:

--site1.less 
-var1.less 

--site2.less 
-var2.less 

--shared.less 

содержание site1.less:

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

содержание site2.less:

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

содержание совместно. менее:

h1{ 
    color: @header-colour; 
} 

Таким образом, у вас есть общий доступ к содержимому в shared.less, файлы site1 и site2 являются только точками входа для создания файлов, а var1 и var2 - ваши файлы переменных.

Надеется, что это помогает

Answer 2

Вы можете иметь один файл main.less и имеете два site1.less и site2.less.

В этих файлах вы определяете переменный цвета и импортировать файл main.less после этого

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

Таким образом, вы можете продолжать делать изменения только в файл main.less и при необходимости просто изменить цвет переменных в сайт. Без файлов