Configurando variáveis ​​Sass dinâmicas com base em classes de elementos HTML

Pergunta: Posso definir dinamicamente variáveis ​​de cores Sass com base em classes aplicadas a um elemento HTML ?

Resposta: Sim, você pode conseguir isso através do uso de inclusões ou mixins Sass.

Usando Inclui

Em um arquivo separado (_theme .scss), defina os estilos usando suas variáveis ​​Sass:

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

Em seu arquivo Sass principal (main.scss), importe o include com base na classe no elemento HTML:

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

    @import "theme";
  }

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

    @import "theme";
 }
}

Usando Mixins

Como alternativa, você pode criar um mixin que receba as cores como argumentos:

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

Em seu arquivo Sass principal, invoque o mixin com as cores apropriadas:

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);
 }
}

Essa abordagem permite aplicar diferentes temas a elementos HTML dinamicamente com base em suas classes.