如何仅使用 CSS 变量创建像 Sass 的'darken()”函数一样的 CSS 颜色阴影？

使用 CSS 变量创建颜色阴影：模拟 Sass 的 Darken() 函数

问题陈述：

创建动态颜色阴影以类似于 Sass 的方式使用 CSS 变量来实现悬停、焦点和活动状态darken() 函数。

解决方案：

CSS 颜色模块级别 4 规范引入了“相对颜色语法”，它可以使用算术运算来操作颜色。这允许创建如下颜色阴影：

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

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

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

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

在此代码中：

• var(--color-primary) 是原始颜色。
• --color-primary-darker 比 深 5% --color-primary.
• --color-primary-darkest 比 --color-primary.

通过调整 calc() 表达式中的百分比，您可以生成各种色调的基色。这种方法提供了与 Sass 的 darken() 函数类似的功能，但使用纯 CSS 语法。

以上是如何仅使用 CSS 变量创建像 Sass 的'darken()”函数一样的 CSS 颜色阴影？的详细内容。更多信息请关注PHP中文网其他相关文章！