css - 可以将LESS变量用作@supports规则吗？

我正在尝试设置LESS，以便如果将变量@fallback设置为true，则CSS呈现的效果就好像我使用的是不支持新功能的旧版浏览器一样，这对于测试非常有用。

我有一个条件语句，可以更改@feature以测试其支持，但是问题是LESS似乎不接受@supports语句中的变量。

它从字面上呈现为@supports not (@feature)。

我尝试了@supports not (~'@{feature}')，但也没有用。

有什么办法可以解决这个问题？

  // Flex Fallback

  @fallback = true;

  & when (@fallback = true) {@feature = 'x';}
  & when (@fallback = false) {@feature = 'display: grid';}

  @supports not (@feature) {
    // Fallback stuff
  }

最佳答案

在@supports规则中，LESS似乎不支持变量插值。

在这种情况下，由于您实际上只是想打开和关闭规则@supports，因此可以通过将后备规则放置在mixin中并在有或没有@supports的情况下输出它们来解决此问题。 -根据您的情况制定的规则：

// Flex Fallback

@fallback: true;

.fallback() {
  // Fallback stuff
}

& when (@fallback = true) {
  .fallback();
}

& when (@fallback = false) {
  @supports not (display: grid) {
    .fallback();
  }
}

关于css - 可以将LESS变量用作@supports规则吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48357768/