SCSS: grattacapi con le variabili colore

Sviluppatore
1

Qualche guru del codice esperto può spiegarmi perché questo sembra sempre generare un errore (indipendentemente dal contenuto del file settings.yaml):

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

ma questo no?

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

Anche se modifico il codice per utilizzare $header_color nel formato rgb(47, 79, 79), ottengo sempre un errore relativo a un elemento $color. :thinking:

2 Mi Piace
2

Questo funziona per me?

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

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

Sì, ma non appena inserisco le variabili in un file settings.yml in questo modo, non funziona. Ricevo un errore che dice $color non è un colore anche se non sto usando una variabile $color qui. Quindi presumo che possa essere correlato a un problema di interpolazione che non capisco.

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

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

Nella mia mente, sembra che si tratti di come viene compilato il CSS. Le variabili funzionano quando dichiarate al momento dell’esecuzione del CSS, ma non dinamicamente tramite un file settings.yml separato. :thinking:

Anche questo non funziona:

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

Ciao Lilly!

Mi sono imbattuto nello stesso problema non molto tempo fa. :smile:

Risposta breve: Temi e variabili CSS sono considerati stringhe e, sebbene tu possa usarli in attributi come color, background, border e così via, non possono essere usati nelle funzioni colore SCSS.

Il problema non è correlato a Discourse:

C’è un modo eccessivamente complicato per aggirare questo problema che non ho provato: Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

4 Mi Piace
5

Ciao Lilly :wave:
Devi creare variabili da questi per renderlo utilizzabile nelle impostazioni. :slightly_smiling_face:
Ecco un rapido esempio:

5 Mi Piace
6

Fantastico, grazie @Don :slight_smile:

3 Mi Piace
7

Non è la prima volta che dico “non è possibile” e tu arrivi dicendo “sì che lo è”, Don :smile:

probabilmente non sarà nemmeno l’ultima volta :see_no_evil:

8 Mi Piace
8

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