PostCSS的每个循环均无法在SCSS中正常工作

Question

我在SCSS中创建了此功能：

@each $header, $value in $header-sizes {
    #{$header} {
        font-size: rem-calc($value);
    }
}

现在我正在使用PostCSS，但是我的代码不起作用...

:root {
    --headers-names: (h1, h2, h3, h4, h5, h6);
    --headers-sizes: (30px, 26px, 24px, 20px, 18px, 16px);
}

@each $name, $size in var(--headers-names), var(--headers-sizes) {
     $name {
        font-size: $size;
    } 
}

使用数组循环是否可以解决此问题？

谢谢！