注意：该帖子最初于2022年10月13日发布给my blog。

我的灵感来自于今天与Brandon McConnell进行简短交流的推文，介绍了CSS中“本机功能的“本地功能”的想法，后者在评论wide gamut color demo by @bramus，该评论还证明了如何使用自定义属性来提供后备值。 “本地函数”和自定义属性的想法都有有趣的用途来提供后备，但值得注意的是，CSS拥有始终提供了一种以级联形式提供后备价值的本地手段。

如果您需要复习，这是一个approachable explainer on the CSS cascade。

CSS中的本地后备

简单地说，以您的喜好相反的顺序重复规则作为后备。这是因为如果浏览器不了解您的首选值，它将被默默地忽略。在Bramus的演示中，他展示了我们如何使用CSS color function和custom properties via @property访问P3颜色空间，以代替Collo hotpink的CSS来创建“ hotterpink”。为了借用他的示例，我们可以简单地通过反向优先顺序宣布价值来实现相同的事情。

.background-hotter-pink {
  background: hotpink;
  background: color(display-p3 1 0 0.87); 
}

在支持颜色功能的浏览器中，背景将是我们漂亮的明亮的“热粉红色”。在较旧的浏览器中，我们会退缩到乏味的，但仍然不错，热键链。虽然自定义属性可以提供更多的控制，但是如本示例所示，级联很容易管理大量的“后备价值”方案。这里的困难是，它有点冗长，并且可能会使您最喜欢的价值作为最后一个。布兰登对“本地功能”的建议确实使我考虑了速记是否有用...输入sass。

方便的后备工作与SASS

在布兰登的推文中，他建议：“类似use-first-that-works(value1, value2, value3, valueN)，但详细的东西”。对我来说，这意味着按照您喜欢浏览器使用它们的顺序列出值。因此，我决定命名Mixin prefer，并且代码相当简单：

/**
 * Generates a cascade of preferred values for a given CSS property
 * @param $property: css property name you wish to provide values for
 * @param $values: any number of values you'd like to use, in order of preference
 *
*/
@mixin prefer($property, $values...) {
  @for $i from length($values) to 0 {
    #{$property}: nth($values, $i);
  }
}

Mixin接受CSS属性名称作为字符串，然后按照优先顺序使用的任何数量值。 $property参数被解析为字符串，而$values...成为以下所有参数的列表。然后，我们只需以相反顺序循环浏览提供的参数，就可以生成正确的级联值。用法例子，上面的粉红色背景看起来像这样：

.background-hotter-pink {
  @prefer('background', color(display-p3 1 0 0.87), hotpink);
}

生成的代码与第一个示例相同。这种杂物素是易于阅读，还是更容易推理，而不是简单地写出重复的样式取决于您对编写CSS和您的特定用途的看法，但是在某些情况下，我可以看到这更方便。

笔记

我应该注意，我 没有任何包含逗号的值对此进行测试。这里的颜色函数示例可以包含逗号，但它们是可选的。我怀疑该功能中的逗号会破坏这一点，在这种情况下，将需要更改混音以接受值作为字符串，并像进行$property参数一样解析它们。在短暂的时间里，我探索了这个想法，我没有想到严格必要的逗号的用途酶，所以我将其保留。

.background-hotter-pink {
  background: prefer(color(display-p3 1 0 0.87), hotpink));
}