相关疑难解决方法(0)

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

在我的应用程序中，我的 React 项目中的按钮具有以下 css 代码：

.Button {
  background-color: #somehex;
}

当用户将鼠标悬停在按钮上时，我希望背景颜色更深一些。我试过改变不透明度，但没有用，目前正在这样做：

.Button:hover {
  transition: 0.2s ease-in;
  background-color: #ALittleDarkerHex;
}

虽然这个过程有效，但它真的很乏味，因为我必须手动寻找我正在使用的颜色的较暗版本。我想知道是否有一种更简单的方法可以使用 CSS 使按钮的背景颜色变暗。