使用可选自定义属性值的 CSS 多值属性

想象一下，您有一个带有 CSS 多值属性的元素，例如 transform：可选自定义属性值

.el {
  transform: translate(100px) scale(1.5) skew(5deg);
}

现在想象一下，您并不总是希望应用所有 transform 值，因此某些值是可选的。 您可能会想到 CSS 可选自定义属性值

.el {
  /*         |-- default ---| |-- optional --| */
  transform: translate(100px) var(--transform);
}

但令人惊讶的是，这种使用可选自定义属性值的方式无法按预期工作。 如果未定义 --transform 变量，则整个属性将不会被应用。 我有一些“技巧”可以解决这个问题，如下所示

.el {
  transform: translate(100px) var(--transform, );
}

注意区别？ 其中定义了一个回退，它设置为一个空值：（, )

这就是诀窍，非常有用！ 以下是 规范 的说明

作为对通常的逗号省略规则的例外，该规则要求省略逗号（如果它们不分隔值），则必须将一个单独的逗号（后面没有任何内容）视为 var() 中的有效项，表示空回退值。

这在某种程度上与 CSS 自定义属性切换技巧 相似，该技巧利用自定义属性具有空字符串的值。

演示

正如我所说，这非常有用，适用于任何 CSS 多值属性。 以下演示展示了使用 text-shadow、background 和 filter，以及我们刚刚讨论的 transform 示例。

查看 CodePen 上 Yair Even Or (@vsync) 的 CSS var – 回退到无。

某些接受多个值的属性（如 text-shadow）需要特殊处理，因为它们仅与逗号分隔符一起使用。 在这些情况下，当定义 CSS 自定义属性时，您（作为代码作者）知道它仅用于已定义值的场景中，在该场景中使用自定义属性。 然后，应在自定义属性中第一个值之前直接插入逗号，如下所示

--text-shadow: ,0 0 5px black;

当然，这会限制在某些属性仅为单个值的情况下使用该变量的能力。 但是，这可以通过为抽象目的创建变量“层”来解决，即自定义属性指向更低级的自定义属性。

注意 Sass 编译器

在探索这个技巧时，我发现 Sass 编译器存在一个错误，它会删除空值（,）回退，这与规范相冲突。 我已经报告了这个错误，希望它很快就会得到修复。

作为临时解决方案，可以使用不会导致渲染的回退，例如

transform: translate(100px) var(--transform, scale(1));