Dores de cabeça com variáveis de propriedade de cor SCSS

Dev
1

Algum guru de código experiente pode explicar por que isso parece sempre gerar um erro (independentemente do conteúdo do arquivo settings.yaml):

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

mas isso não?

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

Mesmo que eu mude o código para usar $header_color no formato rgb(47, 79, 79), ele sempre me dá um erro relacionado a um elemento $color. :thinking:

2 curtidas
2

Isso funciona para mim?

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

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

Sim, mas assim que coloco as variáveis em um settings.yml como este, não funciona para mim. Recebo um erro dizendo $color não é uma cor, embora eu não esteja usando uma variável $color aqui. Então, presumo que possa estar relacionado a uma coisa de interpolação que eu não entendo.

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

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

Na minha opinião, parece que isso é sobre como o CSS é compilado. As variáveis funcionam quando declaradas no tempo de execução do CSS, mas não dinamicamente através de um arquivo settings.yml separado. :thinking:

Isso também não funciona:

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

Oi Lilly!

Eu me deparei com o mesmo problema não muito tempo atrás. :smile:

Resposta curta: Temas e variáveis CSS são considerados strings e, embora você possa usá-los em atributos como color, background, border e assim por diante, eles não podem ser usados em funções de cor SCSS.

O problema não está relacionado ao Discourse:

Existe uma maneira excessivamente complicada de contornar isso que eu não tentei: Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

4 curtidas
5

Olá Lilly :wave:
Você precisa criar variáveis a partir disso para torná-lo funcional nas configurações. :slightly_smiling_face:
Aqui está um exemplo rápido:

5 curtidas
6

Isso é incrível, obrigado @Don :slight_smile:

3 curtidas
7

Não é a primeira vez que digo “não é possível” e você vem com “sim é”, Don :smile:

provavelmente não será a última vez também :see_no_evil:

8 curtidas
8

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