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

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

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

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

    &:before {
        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 */
}

如何使用类似于SASS的darken（）的CSS变量创建阴影？

2 个答案: