web-dev-qa-db-fra.com

Comment créer des nuances de couleurs en utilisant des variables CSS similaires à darken () de SASS?

Je cherche un moyen de modifier une variable CSS comme vous le feriez dans SCSS

Définissez une couleur comme primaire - et automatiquement j'obtiendrais des nuances pour les états de focus et actifs. Fondamentalement, aimerait changer une variable dans les variables css et obtenir 3 nuances de la même couleur.

Ce que j'aimerais réaliser en CSS

$color-primary: #f00;

.button {
    background: $color-primary;

    &:hover,
    &:focus {
        background: darken($color-primary, 5%);
    }

    &:active {
        background: darken($color-primary, 10%);
    }
}

essayant de réaliser:

:root {
    --color-primary: #f00;
    --color-primary-darker: #f20000  //     var(--color-primary) * 5% darker
    --color-primary-darkest: #e50000 //     var(--color-primary) * 10% darker
}

.button {
    background: var(--color-primary);
}

.button:hover,
.button:focus {
    background: var(--color-primary-darker);
}

.button:active {
    background: var(--color-primary-darkest);
}
csssasscss-variables
8
Daniel

Vous pouvez considérer hsl() couleurs et contrôler simplement la luminosité:

:root {
    --color:0, 100%; /*the base color*/
    --l:50%; /*the initial lightness*/
    
    --color-primary: hsl(var(--color),var(--l));
    --color-primary-darker: hsl(var(--color),calc(var(--l) - 5%));
    --color-primary-darkest: hsl(var(--color),calc(var(--l) - 10%)); 
}

.button {
    background: var(--color-primary);
    display:inline-block;
    padding:10px 20px;
    color:#fff;
    cursor:pointer;
}

.button:hover,
.button:focus {
    background: var(--color-primary-darker);
}

.button:active {
    background: var(--color-primary-darkest);
}
<span class="button">some text</span>

En remarque, darken() fait également la même chose:

Rend une couleur plus foncée. Prend une couleur et un nombre compris entre 0% et 100%, et renvoie une couleur dont la luminosité a diminué de ce montant.

15
Temani Afif