如何使用类似于SASS的darken()的CSS变量创建阴影?

时间:2019-03-25 00:44:50

标签: css sass css-variables

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

2 个答案:

答案 0 :(得分:4)

您可以考虑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%之间的数字,然后返回一种颜色,该颜色的亮度降低减少了该数量。

答案 1 :(得分:1)

如果您愿意采用不同的方法来解决您的问题,使用带有伪“: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 */
}