如何像Sass一样用括号组织嵌套CSS选择器且不出现语法报错

你想要的类似Sass的选择器嵌套写法现在已经是原生CSS的标准特性，你写的示例代码不需要做修改，在现代浏览器中可以直接正常运行，不会抛出语法错误。

相关说明如下：

• 兼容性：目前Chrome 112+、Firefox 117+、Safari 16.5+及以上版本的浏览器都原生支持CSS嵌套语法，覆盖了90%以上的全球用户使用场景。
• 特殊场景的语法要求：当你需要匹配父选择器的伪类、伪元素，或者编写兄弟、相邻选择器时，需要用&符号指代父级选择器，示例如下：

.container {
    display:flex;
    /* 普通后代选择器和你的写法一致 */
   .nav{
     align-self: center;
     /* 子元素的伪类也可以嵌套写 */
     &:hover {
        color: blue;
     }
   }
   /* 父元素本身的伪类需要加& */
   &:active {
     opacity: 0.8;
   }
   /* 匹配.container后面的同级.content元素 */
   & + .content {
     margin-top: 10px;
   }
}

• 旧浏览器兼容方案：如果你的项目需要兼容更低版本的浏览器，可以选择以下两种方案：
  • 使用Sass、Less等CSS预处理器，在构建阶段将嵌套代码编译为普通平级CSS代码
  • 接入PostCSS的postcss-nested插件，构建时自动转译嵌套语法

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