CSS @当

CSS 领域最近发展迅速。我又听说了一件从未见过的全新事物，同样是通过 Miriam 了解到的：CSS 条件语句。

? CSS 工作组刚刚决定将 @tabatkins 的 when/else 提案纳入下一级 CSS 条件语句。这是该提案：//m.sbmmt.com/link/2d3bd60a2d899b49827efa1d74476809

— Mia, on Bass (@TerribleMia) 2021年9月15日

媒体查询中已经存在逻辑。事实上，媒体查询本身就是一种逻辑。

<code>@media (min-width: 600px) {
  /* 当此媒体查询为真时，执行这些样式。 */
}</code>

如果您想要互斥的样式，则需要编写两个媒体查询：

<code>@media (min-width: 600px) {
  /* ... */
}
@media (max-width: 599px) {
  /* ... */
}</code>

这有点……繁琐。新的提案中的语法简洁得多：

<code>@when media(min-width: 600px) {
  /* ... */
}
@else {
  /* ... */
}</code>

看起来您可以通过 and 使用多个条件，使用多个 @else 语句创建级联逻辑堆栈，并且不仅可以使用 @media，还可以使用 @supports。

<code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}</code>

在我看来，这非常合乎逻辑且方便！

我看到关于命名的一个小争论。@if 也可能是一个合乎逻辑的名称。但是 Sass 使用 @if，如果他们必须将所有 Sass 逻辑重构为新的东西，或者无论如何都会出现这种情况，对大量的开发者来说都会非常烦人。CSS 应该向任何预处理器让步吗？不，但 Sass 已经存在很长时间了，而且非常流行，而且有一个非常好的替代方案，所以为什么要造成痛苦呢？在那条讨论中，不仅仅是关于 Sass 的问题——一些人认为 @when 本身就是一个更好的名称。

以上是CSS @当的详细内容。更多信息请关注PHP中文网其他相关文章！