在LESS文件中使用@supports语法提示需冒号，如何解决？

嘿，这个坑我之前踩过！你遇到的问题根源在于LESS把@符号当作变量的专属前缀，所以当你直接写@supports时，它会误以为你要定义一个名为supports的变量，自然就会提示你需要加冒号（变量的格式是@变量名: 值;）。

要解决这个问题，有两种简单实用的方法：

方法一：直接转义整个规则 #

用LESS的转义语法~"内容"把整个@supports规则包裹起来，这样LESS就会把它当作原生CSS代码直接输出，不会进行变量解析：

~"@supports (display: grid) {
  div {
    display: grid;
  }
}"

方法二：拆分转义（支持LESS语法嵌套） #

如果你想在@supports规则内部继续使用LESS的嵌套、变量等特性，可以只转义@supports关键字部分，剩下的内容正常编写：

@{supports-key} (display: grid) {
  div {
    display: grid;
    // 这里还能继续写LESS的嵌套或变量
    .child {
      padding: 10px;
    }
  }
}
@supports-key: ~"@supports";

这种写法的好处是兼顾了原生CSS特性查询和LESS的语法便利，编译后依然会输出正确的@supports规则。

两种方法最终编译出来的CSS都是你想要的效果：

@supports (display: grid) {
  div {
    display: grid;
  }
}

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