web-dev-qa-db-fra.com

Utilisation de variables CSS comme arguments de la fonction Sass

Existe-t-il un moyen d'utiliser des variables CSS avec des fonctions Sass, par exemple alléger? Quelque chose comme ça:

:root {
  --color: #ff00ff;
}

.div {
  background-color: lighten(var(--color), 32%);
}

Je reçois un message d'erreur indiquant que "l'argument $color De lighten($color, $amount) doit être une couleur".

J'utilise des variables CSS (pas Sass), car je dois les utiliser dans js.

cssvariablessasscss-variables
16
Majka

METTRE À JOUR:

Je viens de lire que Sass 3.5.0 devrait maintenant prendre en charge les propriétés personnalisées CSS avec des fonctions CSS natives. J'ai essayé ceci avec node-sass mais pour l'instant libsass ne supporte pas cette fonctionnalité de Ruby Sass 3.5

Pour les fonctions CSS natives, je pense que sass les remplace par sa propre implémentation, car j'ai dû utiliser l'interpolation de chaînes dans Sass pour obtenir la compilation de mon CSS:

--Primary: #{"hsl(var(--P-h), var(--P-s), var(--P-l))"};

Pour les fonctions Sass, la chose la plus proche que j'ai trouvée avec du CSS pur pour la légèreté (ne fonctionnera pas avec IE, évidemment), est de séparer les valeurs de couleur en teinte, saturation et luminosité à utiliser dans hsl (). Cela pourrait également être utilisé avec rgba (), mais hsl () peut être utilisé pour contrôler plus facilement les nuances pour le thème de l'application:

:root {
    --P-h: 203;
    --P-s: 82%;
    --P-l: 41%;
    --Primary: hsl(var(--P-h), var(--P-s), var(--P-l));
}

Ensuite, les nuances d'actif, de vol stationnaire, d'accents, etc. peuvent utiliser une modification légèreté en utilisant calc pour calculer un pourcentage de la légèreté d'origine:

:root {
    --Primary-20: hsl(var(--P-h), var(--P-s), calc(var(--P-l) * 0.8));
}

Cela pourrait également aller dans le sens inverse, mais cela ne fonctionnera pas pour tous les scénarios. C'est aussi assez désordonné et vous vous retrouvez avec un peu de pollution dans la portée variable.

1
Jordan Whitfield

Vous pouvez utiliser CSS Colorvars (csscolorvars.github.io) , et vous obtiendrez une fonction de luminosité et de transparence pour pouvoir appliquer la luminosité, l'obscurité et la transparence dans votre variable de couleur.

:root {
  --primary-color: #ff0c22;
  --primary-HS: 355, 100%;
  --primary-HSL: 355, 100%, 52%;
  --secondary-color: #663399;
  --secondary-HS: 270, 50%;
  --secondary-HSL: 270, 50%, 40%;
}

.block{
  background-color: hsl(var(--primary-HS), 60%);
  /*
  Is equivalent to what is desired:
  background: lighten(var(--primary-color), 8%)
  */
}

Lien de CSS Colorvars: https://csscolorvars.github.io/

Tous les problèmes commentent dans: https://github.com/CSSColorVars/csscolorvars/issues

1
Fernando Javier Averanga