Maux de tête de variable de propriété de couleur SCSS

Dev
1

Un gourou du code expérimenté peut-il expliquer pourquoi cela semble toujours générer une erreur (quel que soit le contenu du fichier settings.yaml) :

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

mais ceci non ?

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

Même si je change le code pour utiliser $header_color au format rgb(47, 79, 79), cela me donne toujours une erreur liée à un élément $color. :thinking:

2 « J'aime »
2

Cela fonctionne pour moi ?

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

.d-header {
    background: rgba($header_color, $transparency);
}
1 « J'aime »
3

Oui, mais dès que je mets les variables dans un fichier settings.yml comme ceci, cela ne fonctionne pas pour moi. J’obtiens une erreur disant $color n'est pas une couleur même si je n’utilise pas de variable $color ici. Je suppose donc que cela pourrait être lié à une interpolation que je ne comprends pas.

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

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

Dans mon esprit, cela semble concerner la façon dont le CSS est compilé. Les variables fonctionnent lorsqu’elles sont déclarées au moment de l’exécution du CSS, mais pas dynamiquement via un fichier settings.yml séparé. :thinking:

ceci ne fonctionne pas non plus :

.d-header {
    background: rgba(#{$header_color}, #{$transparency});
}
1 « J'aime »
4

Salut Lilly !

Je suis tombé sur le même problème il n’y a pas si longtemps. :smile:

En bref : les thèmes et les variables CSS sont considérés comme des chaînes de caractères et, bien que vous puissiez les utiliser dans des attributs tels que color, background, border, etc., ils ne peuvent pas être utilisés dans les fonctions de couleur SCSS.

Le problème n’est pas lié à Discourse :

Il existe un moyen trop compliqué de contourner cela que je n’ai pas essayé : Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

4 « J'aime »
5

Bonjour Lilly :wave:
Vous devez créer des variables à partir de celles-ci pour les rendre utilisables dans les paramètres. :slightly_smiling_face:
Voici un exemple rapide :

5 « J'aime »
6

C’est génial, merci @Don :slight_smile:

3 « J'aime »
7

Ce n’est pas la première fois que je dis « ce n’est pas possible » et que tu arrives en disant « si, ça l’est », Don :smile:

probablement pas la dernière fois non plus :see_no_evil:

8 « J'aime »
8

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