基本语法#

1
.card {
2
  padding: 1rem;
3

4
  & .title {
5
    font-size: 1.25rem;
6
  }
7

8
  &:hover {
9
    background: var(--bg-hover);
10
  }
11

12
  @media (width >= 768px) {
13
    padding: 2rem;
14
  }
15
}

和 Sass 最大的区别是元素选择器必须带 &。Sass 里可以直接写 .card { h2 {} }，原生语法要求写成 & h2，否则浏览器不认。迁移时脚本批量替换这一处就能跑通大半。

真正的好处#

• 少一层编译，样式调试时 Sources 面板里看到的行号就是源文件行号
• 媒体查询可以写在选择器内部，响应式样式不再割裂在文件两头
• 和 :has()、层叠层（@layer）这些新能力组合使用，选择器权重问题好控多了

兼容性处理#

老项目还要照顾旧浏览器的话，PostCSS 一行配置就能垫平：

1
postcssPresetEnv({ features: { 'nesting-rules': true } })

新项目我建议直接裸写，不做任何转译。不支持嵌套的浏览器如今和不支持 flexbox 的占比差不多，为它们多养一个构建步骤不划算。