@BANTIK

Как лучше организовать стили на less для поддержки разных цветовых решений интерфейса?

Есть задача организовать поддержку различных цветовых решений для интерфейса. Все стили на less, сгруппированы в компоненты. Т.е. разметка всегда общая, отличаются только цвета элементов.

Мне видится два пути:
1. Для каждого элемента определить персональную переменную с цветом, исходя из контекста элемента (например @loginFormBg, @SerachButtonTextColor) и потом просто для каждой темы указать нужные цвета для этих переменных.
Но тут есть явный минус в виде огромного кол-ва переменных, которые зачастую будут содержать одни и те же цветовые значения.
2. Вынести в название переменной идентификатор темы, а внутри каждого класса сделать фактически if, который в зависимости от идентификатора темы будет использовать нужное значение.
.sidebar {
    width: 220px;
    margin: 10px 0;
    & when (@theme = default) {background: @black;}
    & when (@theme = fireCat) {background: @fc_red;}
}

3. Третий вариант в виде расширения существующих классов в отдельном файле темы не рассматриваю, т.к.
во-первых, получу кучу дублирования в названиях классов и, как следствие, увеличение размера css,
во-вторых, нарушу структуру кода.

Есть ли какие-то еще красивые решения?
  • Вопрос задан
  • 264 просмотра
Пригласить эксперта
Ответы на вопрос 3
Vostrugin
@Vostrugin
frontend developer
А если использовать один ключевой цвет темы, а все остальные цвета задавать относительно его?
Ответ написан
sim3x
@sim3x
3
.blah{}

body.theme1{
   .blah{}

}
Ответ написан
ilyapasyuk
@ilyapasyuk
Разработчик переднего-конца
Попробуйте изменить свой подход посредством использования различных методологий, типо БЭМ от Яндекса.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы