Dolores de cabeza con variables de color en SCSS

Desarrollador
1

¿Puede algún gurú del código con conocimientos explicar por qué esto siempre parece generar un error (independientemente del contenido del archivo settings.yaml):

.d-header {
    background: rgba($header_color, $transparency);
}

¿pero esto no?

.d-header {
    background: rgba(darkslategrey, 0.5);
}

Incluso si cambio el código para usar $header_color en el formato rgb(47, 79, 79), siempre me da un error relacionado con un elemento $color. :thinking:

2 Me gusta
2

¿Esto me funciona?

$header_color: rgb(0,0,0);
$transparency: 0.5;

.d-header {
    background: rgba($header_color, $transparency);
}
1 me gusta
3

Sí, pero tan pronto como pongo las variables en un settings.yml como este, no me funciona. Recibo un error que dice $color no es un color aunque no estoy usando una variable $color aquí. Así que supongo que puede estar relacionado con algo de interpolación que no entiendo.

header_color:
  type: string
  default: ""
  description: 
    en: "..."

transparency:
  type: string
  default: ""
  description: 
    en: "..."

En mi opinión, parece que esto tiene que ver con cómo se compila el CSS. Las variables funcionan cuando se declaran en el tiempo de ejecución de CSS, pero no dinámicamente a través de un archivo settings.yml separado. :thinking:

Esto tampoco funciona:

.d-header {
    background: rgba(#{$header_color}, #{$transparency});
}
1 me gusta
4

¡Hola Lilly!

Me encontré con el mismo problema no hace mucho. :smile:

Respuesta corta: Los temas y las variables CSS se consideran cadenas de texto y, si bien puedes usarlos en atributos como color, background, border, etc., no se pueden usar en funciones de color SCSS.

El problema no está relacionado con Discourse:

Hay una forma demasiado complicada de sortear esto que no probé: Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

4 Me gusta
5

Hola Lilly :wave:
Tienes que crear variables a partir de esto para que funcione en la configuración. :slightly_smiling_face:
Aquí tienes un ejemplo rápido:

5 Me gusta
6

Eso es genial, gracias @Don :slight_smile:

3 Me gusta
7

No es la primera vez que digo “no es posible” y tú vienes con “sí que lo es”, Don :smile:

probablemente tampoco será la última vez :see_no_evil:

8 Me gusta
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.