CSS 具有可选自定义属性值的多值属性(Multi-Value)

想象一下，你有一个元素具有多值 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 属性。 除了我们刚刚讨论的 transform 示例之外，下面的示例还使用文本阴影、背景和过滤器来展示它。

HTML

<div class='defined'>Defined</div>
<div class='undefined'>Undefined</div>
<div class='no-fallback'>Without Fallback</div>

CSS

body{
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  height: 100vh;
  font: bold 20px Arial;
}

div {
  cursor: pointer;
  user-select: none;
  padding: .5em;
  display: inline-block;
}

.defined {
  /* 
    不定义以下变量将导致整个属性不起作用，除非明确将备用值设置为空：（，）
  */
  --transform: rotate(30deg) scale(1.5);
  --text-shadow: ,0 0 5px black; /* special case, which requires a comma at the beginning  */
  --bg-color: gold;
  --filter: sepia(60%);
  
  /* 具有默认值的多值属性 + 可选的额外属性 */
  transform: skew(5deg) var(--transform, );
  text-shadow: 0 -1px 3px white var(--text-shadow, );
  background: linear-gradient(90deg, cyan, transparent) var(--bg-color, );
  filter: contrast(70%) invert(10%) var(--filter, );
}

.undefined {
  transform: skew(5deg) var(--transform, );
  text-shadow: 0 -1px 3px white var(--text-shadow, );
  background: linear-gradient(90deg, cyan, transparent) var(--bg-color, );
  filter: contrast(70%) invert(10%) var(--filter, );
}

.no-fallback {
  /* 具有默认值的多值属性 + 可选的额外属性 */
  transform: skew(5deg) var(--transform);
  text-shadow: 0 -1px 3px white var(--text-shadow);
  background: linear-gradient(90deg, cyan, transparent) var(--bg-color);
  filter: contrast(70%) invert(10%) var(--filter);
}

显示的效果如下所示，我们也可以点击上面的“尝试一下”按钮在线查看效果。

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

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

当然，这会抑制在它是某些属性的唯一值的地方使用该变量的能力。 不过，这可以通过为抽象目的创建变量“层”来解决，即自定义属性指向较低级别的自定义属性。

当心 Sass 编译器

在探索这个技巧时，发现了 Sass 编译器中的一个错误，该错误会去除空值 (,) 的备用值，这不符合规范。 希望它会尽快修复。

作为临时解决方法，可以使用如下的技巧：

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

火焰兔

海报 链接