Est-il possible d'utiliser des variables CSS dans les fonctions SASS?

Question

J'ai défini une couleur dans ma racine:

:root {
--purple: hsl(266, 35%, 70%);
}

Et j'essaie de l'utiliser dans une fonction SASS pour lui donner de la transparence:

.purple {
  background: transparentize(#{"var(--primary-color)"}, 0.7)
}

Quelqu'un connaît-il un moyen de faire fonctionner cela? Ou n'est-ce pas possible?

Answer 1

Les variables globales peuvent être définies en dehors d'un élément dans une pseudo-classe: root:

:root {
  --color-background: #FFFFFF;
}

vous pouvez définir une fonction comme celle-ci:

@function color($color-name) {
  @return var(--color-#{$color-name});
}

et appelez-le dans votre sass:

body { 
  color: color(primary); 
}

le code sass compilé est:

body { 
  color: var(--color-primary); 
}