我正在寻找一种像在 SCSS 中那样修改 CSS 变量的方法
定义一种颜色,如主色 - 我会自动获得焦点和事件状态的阴影。 基本上,想更改 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);
}
最佳答案
新Specification引入了“相对颜色语法”,您可以在其中执行以下操作
:root {
--color-primary: #f00; /* any format you want here */
--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5%));
--color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10%));
}
想法是将主要颜色转换为 hsl
格式并使用 calc()
调整亮度。
到目前为止,仍然不支持,因此请考虑以下解决方案。
可以考虑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);
display:inline-block;
padding:10px 20px;
color:#fff;
cursor:pointer;
}
.button:hover,
.button:focus {
background: var(--color-primary-darker);
}
.button:active {
background: var(--color-primary-darkest);
}
<span class="button">some text</span>
作为旁注,darken()
也在做同样的事情:
Makes a color darker. Takes a color and a number between 0% and 100%, and returns a color with the lightness decreased by that amount.
关于css - 如何使用类似于 Sass 的 darken() 的 CSS 变量创建颜色阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55329996/