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