Manipulation des variables css var(-- )

Bonjour,

j'utilise des variables css pour un projet.
J'aimerai pouvoir appliquer des "calculs" sur les variables un peu comme en less ou sass, est ce possible ?

Par exemple un

.btn {
background: var(--color-btn);
}
.btn:hover {
background: lighten ( var(--color-btn)  / 20%) ;
}

??
Merci

Bonjour ioks3,

D’abord petite remarque, attention je ne suis pas sûre que variables css soient reconnues par tous les navigateurs a toi de vérifier.

Les calculs sauf erreur de ma part ne sont pas possible sur les couleurs.
Exemple :
https://codepen.io/Zonecss/pen/gzbKjN
Modifié par aliasdmc (19 Apr 2018 - 18:47)

Quand je parle de calcul pour les couleurs, je veux dire par exemple :
darken(@color, 10%);

Mais je pense que j'ai un petit hack possible :
Quand on est en hover, focus ou active, j'ajoute un ::after avec un background rgba(0,0,0, ,0.2)
et hop ça fonce le bouton

:)

Hello,

Les fonctions Sass telles que lighten ou darken n'existent pas en CSS natif, en tout cas pas encore. C'est un brouillon de spec très récent : https://drafts.csswg.org/css-color/#modifying-colors

Ton souci ne concerne donc pas les variables, ni calc(), mais des fonctionnalités non existantes.

Tu peux t'en sortir via CSSnext avec ce genre de fonctions : http://cssnext.io/features/#color-function
Modifié par Raphael (20 Apr 2018 - 11:31)

Authors welcome suggestions on this document. This document may be updated based on implementation experience, but no commitment is made by the authors regarding future updates. Authors would like the proposals contained in this document to be discussed in the CSS Working Group for open standardization under W3C Process.
see: https://luckypatcher.pro/
https://kodi.software/
https://showbox.software/
Modifié par athman88 (26 Apr 2018 - 15:57)