如何使用类似于 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.

Answer 2

如果您愿意采用不同的方法来解决您的问题，使用带有伪“:before”元素的掩码可以解决您的问题。虽然如果你使用它，我会建议你将按钮中的任何内容放在一个跨度或其他东西内，给它一个“z-index：1”，所以内容不在掩码后面。

:root {
    --color-primary: #f00;
}

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

    &:before {
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
    }
}

.button:hover:before,
.button:focus:before {
    background:rgba(0,0,0,0.05) /* black mask with 5% opacity */
}

.button:active:before {
    background:rgba(0,0,0,0.1) /* black mask with 10% opacity */
}

Answer 3

这个怎么样（纯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%);
}

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

How to create color shades using CSS variables similar to darken() of Sass?

css

sass

css-variables