Настройка динамических переменных Sass на основе классов элементов HTML

Вопрос: Могу ли я динамически устанавливать цветовые переменные Sass на основе классов, примененных к элементу HTML ?

Ответ: Да, этого можно добиться с помощью включений Sass или миксины.

Использование включений

В отдельном файле (_theme.scss) определите стили, используя переменные Sass:

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

В ваш основной файл Sass (main.scss) импортируйте включение на основе класса элемента HTML:

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

Использование миксинов

В качестве альтернативы вы можете создать миксин, который принимает цвета в качестве аргументов:

@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}

В вашем основном файле Sass вызовите миксин с соответствующими цветами:

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @include theme($accent, $base, $flat);
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @include theme($accent, $base, $flat);
 }
}

Этот подход позволяет динамически применять различные темы к элементам HTML на основе их классов.