使用 CSS 变量自动添加前缀

我将其称为一个货真价实的 CSS 技巧，感谢 Lea Verou。

不要错过评论，其中 Sérgio Gomes 提醒我们这可能会使我们更容易 在 JavaScript 中更改值，因为您可以在那里不必担心前缀。 在 JavaScript 中更改 CSS 变量已经相当有吸引力，因为更改将自然地分散到它们在任何地方使用的位置。

以及 Andrea Giammarchi 的技巧，您可以在其中创建一个行为几乎像 @mixin 并具有默认值的设置

* {
  --box-shadow:
    var(--box-shadow-x, 0)
    var(--box-shadow-y, 0)
    var(--box-shadow-blur) /* no default, required */
    var(--box-shadow-radius, 0)
    var(--box-shadow-color, black);
  box-shadow: var(--box-shadow, initial);
}

p {
  --box-shadow-blur: 8px;
}

p.special {
  --box-shadow: 10px 0 0 green;
}

直接链接 →