Can CSS Variables Mimic Sass's `darken()` Function for Color Shade Generation?

Color Shade Generation with CSS Variables: A Systematic Method

Question

Can we mimic the functionality of Sass's darken() function using CSS variables to generate shades of a defined color?

Approach Using Relative Color Syntax

CSS introduces "relative color syntax," which enables the following:

:root {
  --color-primary: #f00;
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

Here's how it works:

• --color-primary: Define the base color.
• --color-primary-darker: Darken the base color by 5% using hsl().
• --color-primary-darkest: Darken the base color by 10% using hsl().

Usage

Use these variables to style elements:

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

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

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

This approach allows you to define color shades dynamically without modifying the color variable, achieving the desired gradient effect with three shades.

The above is the detailed content of Can CSS Variables Mimic Sass's `darken()` Function for Color Shade Generation?. For more information, please follow other related articles on the PHP Chinese website!