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

Question

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

定义一种颜色，如主要颜色 - 我会自动获得焦点和活动状态的阴影。基本上，想改变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);
}

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

: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() 也在做同样的事情：

使颜色变深。获取颜色和介于 0% 和 100% 之间的数字，并返回 亮度降低 了该数量的颜色。

原文由 Temani Afif 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个怎么样（纯sass/scss）：

首先，我们需要将颜色拆分为 hsla 值并将每个值保存在单独的自定义属性中。幸运的是，sass 有一些功能可以完成这项工作。

 @mixin define-color($title, $color) {
    --#{$title}-h: #{hue($color)};
    --#{$title}-l: #{lightness($color)};
    --#{$title}-s: #{saturation($color)};
    --#{$title}-a: #{alpha($color)};
}

现在我们可以将其重新组合在一起，并在途中进行一些调整。

 @function color($title, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 0) {
    @return hsla(
        calc(var(--#{$title}-h) + #{$hue}),
        calc(var(--#{$title}-s) + #{$saturation}),
        calc(var(--#{$title}-l) + #{$lightness}),
        calc(var(--#{$title}-a) + #{$alpha}),
    );
}

现在我们准备定义一些颜色变量……

 :root {
    @include define-color("primary", #696969);
    @include define-color("secondary", blue);
}

覆盖它们（例如在主题之间动态切换）……

 :root.theme-light {
    @include define-color("primary", #424242);
    @include define-color("secondary", red);
}

使用和调整它们！

 .example-class {
    color: color("primary");
    background: color("secondary", $lightness: +20%, $alpha: -0.3);
    border: 1px solid color("primary", $hue: -30deg, $saturation: 5%);
}

原文由 Romalex 发布，翻译遵循 CC BY-SA 4.0 许可协议