PostCSS 插件里怎么正确处理嵌套的 at-rule？

Code°爱景提问于 2026-03-25 14:15:26 阅读 6

工具

我写了个 PostCSS 插件想遍历所有的 @media 规则，但遇到嵌套的 @media 就出问题了。比如下面这种结构，插件只处理了外层，内层直接被忽略了：

@media (min-width: 768px) {
  .foo {
    color: red;
    @media (min-width: 1024px) {
      color: blue;
    }
  }
}

我用的是 root.walkAtRules('media', ...)，是不是得递归处理子节点？但不确定该怎么写才不会漏掉或者重复处理。

我来解答赞 1 收藏

反馈

1 条解答

程序员洺华 Lv1

root.walkAtRules('media', rule => {
processMediaRule(rule);
});

function processMediaRule(rule) {
// 处理当前的 @media 规则
console.log(rule.params); // 比如打印下当前媒体查询条件

// 递归处理子规则
rule.walkAtRules('media', subRule => {
processMediaRule(subRule);
});
}

// 拿去改改

2026-03-25 14:18