css - 如何使用类似于 Sass 的 darken() 的 CSS 变量创建颜色阴影？

Question

我正在寻找一种像在 SCSS 中那样修改 CSS 变量的方法

定义一种颜色，如主色 - 我会自动获得焦点和事件状态的阴影。基本上，想更改 css 变量中的一个变量并获得相同颜色的 3 种色调。

我想在 CSS 中实现什么

$color-primary: #f00;

.button {
    background: $color-primary;

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

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

努力实现:

: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);
}

Answer 1

新Specification引入了“相对颜色语法”，您可以在其中执行以下操作

:root {
    --color-primary: #f00; /* any format you want here */
    --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%)); 
}

想法是将主要颜色转换为 hsl 格式并使用 calc() 调整亮度。

到目前为止，仍然不支持，因此请考虑以下解决方案。

---

可以考虑hsl()颜色并简单地控制亮度:

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

作为旁注，darken()也在做同样的事情:

Makes a color darker. Takes a color and a number between 0% and 100%, and returns a color with the lightness decreased by that amount.