Sass中@supports结合:focus-visible伪类的正确语法及问题咨询

问题根源 #

你的代码存在两个核心问题：

• 旧版本Sass（如LibSass或Dart Sass < 1.23.0）对@supports selector()的支持不完善，无法正确处理其中的&父选择器，导致编译后的@supports条件失效，浏览器直接忽略规则并应用内部样式。
• 省略selector()函数的写法（@supports not (&:focus-visible)）属于错误语法，浏览器会判定该条件无效，同样会跳过@supports直接生效内部样式。

正确写法 #

使用Sass插值#{&}让父选择器提前展开，再传入selector()函数，同时确保使用兼容的Sass版本（Dart Sass >= 1.23.0）：

// 示例嵌套在.button选择器内
.button {
  @supports not selector(#{&}:focus-visible) {
    &:focus {
      outline: 1px solid white;
      outline-offset: 3px;
    }
  }
}

编译后的正确CSS #

上述代码会被编译为标准的可识别CSS：

@supports not selector(.button:focus-visible) {
  .button:focus {
    outline: 1px solid white;
    outline-offset: 3px;
  }
}

此时浏览器会正确识别@supports条件：仅在不支持:focus-visible选择器时，才应用:focus的轮廓样式。

额外注意 #

• 停止使用已停止维护的LibSass，切换到Dart Sass以获得完整的CSS特性支持。
• 若无需嵌套，直接编写全局规则时，可省略&直接写选择器：

  @supports not selector(:focus-visible) {
    :focus {
      outline: 1px solid white;
      outline-offset: 3px;
    }
  }
  

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