如何使用 Sass 的'darken()”函数等变量生成 CSS 颜色阴影？

使用 CSS 变量创建颜色阴影（如 Sass 的 darken() 函数）

在 CSS 中，可以定义原色变量并自动生成悬停、焦点和活动状态的阴影。操作方法如下：

定义主色变量：

:root {
  --color-primary: #f00;
}

使用相对颜色语法使主色变暗：

CSS 规范引入了“相对颜色语法”，它允许我们使用方程式来操纵颜色。要将主色调暗 5%：

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

同样，要将主色调暗 10%：

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

通过将原色定义为变量，我们现在可以轻松修改它并自动生成各种状态的阴影。与使用单独的颜色类相比，这种方法提供了一种更可维护且更有效的方式来创建颜色变化。

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