小编Dan*_*iel的帖子

我正在寻找一种修改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);
}