PostCSS能否正确解析类似SASS的语法“＃{$ Interpolation}”代码

Question

我几乎阅读了所有PostCSS Plugins，并尝试了很多方法来解决以下代码：

.component {
  $c: &;
  padding: 2vw;
  &__card {
    background-color: #fff;
    &:hover #{$c}__name {
      color: #bada55;
    }
  }
  &__name {
    color: #000;
  }
  &__button {
    background-color: blue;
    color: #fff;
  }
}

但失败了，precss似乎是一个很好的解决方案，但也解决了不正确的问题。

它编译结果如下：

.component {
  padding: 2vw;
}
  .component__card {
    background-color: #fff;
  }
  .component__card:hover .component__card__name {
      color: #bada55;
    }
  .component__name {
    color: #000;
  }
  .component__button {
    background-color: blue;
    color: #fff;
  }

那显而易见的错误，您可以在线测试sass代码http://sass.js.org/，我期望的结果应该是：

.component {
  padding: 2vw;
}
.component__card {
  background-color: #fff;
}
.component__card:hover .component__name {
  color: #bada55;
}
.component__name {
  color: #000;
}
.component__button {
  background-color: blue;
  color: #fff;
}

如何使用 postcss 修复错误？是否有任何插件可以编译纠正？

  

参考

     

  

• sass syntax

  

• How to do SASS Grandparent Selectors