dynamic - 如何创建盒子阴影变量？

Question

我是 CSS 和 HTML 的新手。来自 WPF 背景，我正在尝试实现可以​​预定义的阴影效果（就像在 WPF 中定义效果并在需要时使用 DynamicResource 调用它们一样）。

我想定义这样的阴影：

 --boxShadow1: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

并在我需要时在 CSS 中使用它，如下所示：

box-shadow: var(--boxShadow1);

我该怎么做呢？如果纯 CSS 解决方案是不可能的，有没有其他方法可以做到这一点？

谢谢你。

标签： dynamicbox-shadow

Answer 1

试试这个 https://sass-lang.com/

sass 也喜欢 css

sass 盒子阴影代码

@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $color: $default)