Configuración de variables dinámicas de Sass basadas en clases de elementos HTML

Pregunta: ¿Puedo configurar dinámicamente variables de color Sass basadas en clases aplicadas a un elemento HTML? ?

Respuesta: Sí, puedes lograr esto mediante el uso de inclusiones o mixins de Sass.

Uso de inclusiones

En un archivo separado (_theme .scss), defina los estilos usando sus variables Sass:

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

En su archivo Sass principal (main.scss), importe la inclusión según la clase en el elemento HTML:

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

    @import "theme";
  }

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

    @import "theme";
 }
}

Usando Mixins

Alternativamente, puedes crear un mixin que tome los colores como argumentos:

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

En su archivo Sass principal, invoque el mixin con los colores apropiados:

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

Este enfoque le permite aplicar diferentes temas a elementos HTML dinámicamente según sus clases.