整洁的可选自定义属性值技巧

处理多值 CSS 属性（例如 transform）中的可选自定义属性值，有时需要一些技巧。 假设您有一个元素，其 transform 属性包含多个值：

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

如果只想根据需要应用某些转换值，则可以使用自定义属性来实现可选性：

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

然而，如果 --transform 未定义，整个 transform 属性将失效。 解决方法是使用一个空值作为回退值：

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

注意区别？这里定义了一个空值 (,) 作为回退。 根据规范：

与通常的逗号省略规则（要求在逗号不分隔值时省略）不同，在 var() 中，一个单独的逗号（后面没有任何内容）必须被视为有效，表示一个空的回退值。

这与 CSS 自定义属性切换技巧类似，该技巧利用自定义属性具有空格值。

演示

此技巧适用于任何多值 CSS 属性。 下面的演示除了 transform 之外，还使用了 text-shadow、background 和 filter。

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

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

当然，这会限制在属性值唯一的情况下使用此变量的能力。 但是，可以通过创建变量的“层”来解决这个问题，即自定义属性指向更低级别的自定义属性。

注意 Sass 编译器

在探索此技巧时，我发现 Sass 编译器中存在一个错误，它会去除空的回退值 (,)，这与规范不符。 我已报告了此错误，并希望它很快得到修复。

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

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

以上是整洁的可选自定义属性值技巧的详细内容。更多信息请关注PHP中文网其他相关文章！