28202 sujets

CSS et mise en forme, CSS3

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
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

:)
Administrateur
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)
Sujet clos
Aller à