CSS 变量可以模仿 Sass 的'darken()”函数来生成颜色阴影吗？

使用 CSS 变量生成颜色阴影：一种系统方法

问题

我们能否使用 CSS 变量来模仿 Sass 的 darken() 函数的功能生成定义颜色的阴影？

使用相对颜色的方法语法

CSS 引入了“相对颜色语法”，它可以实现以下功能：

:root {
  --color-primary: #f00;
  --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));
}

其工作原理如下：

• --color-primary: 定义基色。
• --color-primary-darker：使用使基色变暗 5% hsl().
• --color-primary-darkest: 使用 hsl() 将基色变暗 10%。

用法

使用这些变量样式元素：

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

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

这种方法允许您动态定义色调，而无需修改颜色可变，以三种色调达到想要的渐变效果。

以上是CSS 变量可以模仿 Sass 的'darken()”函数来生成颜色阴影吗？的详细内容。更多信息请关注PHP中文网其他相关文章！