SCSS Farbeigenschaftsvariablen-Kopfschmerzen

Entwickler
1

Kann ein kenntnisreicher Code-Guru erklären, warum dies (unabhängig vom Inhalt der Datei settings.yaml) immer einen Fehler auszulösen scheint:

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

aber dies nicht?

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

Selbst wenn ich den Code so ändere, dass $header_color im Format rgb(47, 79, 79) verwendet wird, erhalte ich immer eine Fehlermeldung bezüglich eines $color-Elements. :thinking:

2 „Gefällt mir“
2

Funktioniert das für mich?

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

.d-header {
    background: rgba($header_color, $transparency);
}
1 „Gefällt mir“
3

Ja, aber sobald ich die Variablen in eine settings.yml wie diese einfüge, funktioniert es bei mir nicht. Ich erhalte eine Fehlermeldung, dass $color keine Farbe ist, obwohl ich hier keine $color-Variable verwende. Ich gehe also davon aus, dass es sich um ein Interpolationsproblem handelt, das ich nicht verstehe.

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

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

Meiner Meinung nach scheint es darum zu gehen, wie das CSS kompiliert wird. Die Variablen funktionieren, wenn sie zur Laufzeit von CSS deklariert werden, aber nicht dynamisch über eine separate settings.yml-Datei. :thinking:

Das funktioniert auch nicht:

.d-header {
    background: rgba(#{$header_color}, #{$transparency});
}
1 „Gefällt mir“
4

Hallo Lilly!

Ich bin vor kurzem auf dasselbe Problem gestoßen. :smile:

Kurze Antwort: Themes und CSS-Variablen werden als Strings betrachtet und können zwar in Attributen wie color, background, border usw. verwendet werden, aber nicht in SCSS-Farbfunktionen.

Das Problem hat nichts mit Discourse zu tun:

Es gibt einen übermäßig komplizierten Weg, dies zu umgehen, den ich nicht ausprobiert habe: Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

4 „Gefällt mir“
5

Hallo Lilly :wave:
Du musst daraus Variablen erstellen, damit es in den Einstellungen funktioniert. :slightly_smiling_face:
Hier ist ein kurzes Beispiel:

5 „Gefällt mir“
6

Das ist großartig, danke @Don :slight_smile:

3 „Gefällt mir“
7

Es ist nicht das erste Mal, dass ich sage „Das ist nicht möglich“ und du kommst mit „Doch, das ist es“, Don :smile:

Wahrscheinlich auch nicht das letzte Mal :see_no_evil:

8 „Gefällt mir“
8

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