color.adjust() / color.mix()

Définition

Fonctions du module sass:color pour manipuler les couleurs. Les anciennes fonctions à canal unique (lighten, darken, saturate, adjust-hue, opacify…) et les accesseurs (red, hue, lightness…) sont dépréciés depuis Dart Sass 1.79.0 et retirés dans Dart Sass 2.0 : on utilise color.adjust, color.scale et color.channel, qui gèrent les espaces CSS Color 4 (oklch, display-p3).

Analogie

Un peintre qui éclaircit, assombrit ou mélange ses couleurs sur sa palette.

Exemple de code

@use 'sass:color';

$base: #3498db;
// DÉPRÉCIÉ : lighten($base, 15%)
$lighter: color.adjust($base, $lightness: 15%);
$darker: color.scale($base, $lightness: -30%);
$blend: color.mix($base, white, 80%);
$l: color.channel($base, 'lightness', $space: oklch);

Cas d'usage

Générer des palettes de couleurs dérivées automatiquement a partir d'une couleur de base.

Anti-pattern

Termes liés

Sources

• sass-lang.com/blog/the-road-to-dart-sass-2/
• sass-lang.com/documentation/breaking-changes/color-functions/