如何使用类似于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);
}

Answer 1

您可以考虑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％之间的数字，并返回一种亮度降低了该数量的颜色。

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