能否在CSS @supports规则中使用LESS变量？

我完全懂你的痛点——想用@fallback变量切换@supports里的测试特性，结果LESS直接把变量名原封不动输出了，连转义都不管用对吧？别着急，这是因为LESS对@supports这类CSS原生规则的变量解析有特殊限制，不过我们可以用字符串插值+转义语法或者条件混合来搞定。

方法一：转义整个@supports规则（推荐） #

这种方法利用LESS的转义语法，强制让变量在生成CSS时被正确替换，代码更简洁：

// Flex Fallback
@fallback: true; // 改成false即可切换到新特性测试

// 根据@fallback值设置要检测的特性
@feature: if(@fallback, x, display: grid); // LESS 3.0+支持if函数

// 转义整个@supports规则，确保变量被解析
~"@supports not (@{feature})" {
  // 这里写你的降级兼容代码
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

当@fallback为true时，最终生成的CSS是：

@supports not (x) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

当@fallback为false时，生成：

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

如果你的LESS版本低于3.0，不支持if()函数，也可以用原来的条件判断写法：

@fallback: true;

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

~"@supports not (@{feature})" {
  // 降级代码
}

方法二：使用条件混合 #

如果你觉得转义语法不够直观，也可以用LESS的条件混合来分别定义不同的@supports块：

// Flex Fallback
@fallback: true;

// 定义条件混合，根据@fallback输出对应规则
.fallback-test() when (@fallback = true) {
  @supports not (x) {
    .container {
      display: flex;
    }
  }
}

.fallback-test() when (@fallback = false) {
  @supports not (display: grid) {
    .container {
      display: flex;
    }
  }
}

// 调用混合生成代码
.fallback-test();

为什么原来的写法不行？ #

LESS在处理@supports这类原生CSS规则时，不会主动解析内部的变量——它会把@feature当作普通的CSS标识符输出，所以你会看到@supports not (@feature)这样的无效代码。而转义整个规则时，LESS会先完成变量插值，再把整个字符串转换成有效的CSS规则，这样就绕过了这个限制。

内容的提问来源于stack exchange，提问作者Andrew Folts