css - selectors - Establecer una variable SASS dependiendo

selectors sass

Question

Estoy buscando una forma de usar un color particular dependiendo de una clase en la etiqueta del cuerpo.

Tengo un archivo principal de scss como este

// variables.scss
$bg-main:      white;
$color-first:  red;
$color-second: green;

Y en mis otros archivos, uso los colores

// content.scss
.content {
     .some-selector: {
         // some styles
         color: $color-second;
     }
     a:hover {
         // some styles
         color: $color-second;
     }
}    

// and same goes for menu.scss etc.

Ahora tengo una clase dinámica en el cuerpo, que cambia según el menú seleccionado actual. Me gustaría $ color-second para ser diferente para cada clase de cuerpo, y no sé cómo hacer eso. La única solución que encontré fue mover todo el $ color-second de cada archivo en un solo archivo, como este:

.body-1 {
    .content a:hover, .content .some-selector {
        color: green;
    }
}
.body-2 {
    .content a:hover, .content .some-selector {
        color: blue;
    }
}
.body-1 {
    .content a:hover, .content .some-selector {
        color: black;
    }
}

Entonces no necesito escribir el color en cada archivo. Esto funciona bien, pero si necesito configurar este $ color-second para algún otro selector, necesito poner eso en este gran archivo.

¿Es posible hacer esto de otra manera?

Ya revisé estas respuestas, pero no me ayudó mucho:

• SASS establece variable dependiendo de la clase CSS
• Creación o referencia de variables dinámicamente en Sass
• Combinar cadena y variable a una variable con SASS

Answer 1

Hay varias formas de hacer esto. Los dos más obvios que vienen a la mente son mixins y loops:

Mixins

Simplemente coloque todo lo que desee en una sola mezcla, y luego úselo para cada clase de cuerpo:

@mixin colored-content($color) {
  .content a:hover, .content .some-selector {
      color: $color;
  }

  /* Any other rules which use $color here */
}

.body-1 {
  @include colored-content(green);
}

.body-2 {
  @include colored-content(''#FF0000'');
}

.body-3 {
  @include colored-content(darken(red, 20));
}

Puede extender este ejemplo con cualquier cantidad de argumentos (por ejemplo, $textColor y $bgColor ), condiciones o reglas.

Con este enfoque, no tendrá repeticiones de código SCSS, y cualquier actualización se introducirá fácilmente.

Lazo

Otra forma es usar un bucle simple:

$body_themes: (
    "body-1": green,
    "body-2": #FF0000,
    "body-3": darken(red, 2)
);

@each $body_class, $color in $body_themes {
  .#{$body_class} {
    .content a:hover, .content .some-selector {
      color: $color;
    }

    /* Any other rules which use $color here */
  }
}

Es aún más corto, pero es menos legible.

PD: por cierto, es posible combinar mezclas y bucles :)