CSS 中的 if/else

我们知道，CSS 中没有条件语句，但这种情况可能很快就会随着新的@when和@else运算符而改变

目前，执行条件语句的唯一方法是使用如下媒体查询：

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

它运行完美，但在新提案中它看起来更加清晰并且与许多编程语言非常相似。

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

我们也可以通过使用多个@else语句来执行多个条件，不仅使用@media，还可以使用 @supports 。

@when media(width >= 600px) and media(pointer: fine) and supports(display: grid) {
  /* A */
} @else supports(caret-color: red) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

关于这个新功能的命名，可能存在一些疑问。有些人认为这个@if名称比更好@when，但这个命名背后的原因可能是 Sass 已经在使用了@if，如果许多开发人员不得不重构他们的 Sass 逻辑，那么会很烦人。

坏消息是，目前它还不受任何浏览器支持，甚至没有在上列出caniuse.com。

您对这个新提议有何看法？

文章来源：https://dev.to/quentindamianino/ifelse-in-css-45f5