Question

我正在尝试设置我的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
  }

Answer 1

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

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

// Flex Fallback

@fallback: true;

.fallback() {
  // Fallback stuff
}

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

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

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

1 个答案: