PostCSS如何正确处理类似“#{$Interpolation}”这样的SASS语法

Question

我在PostCSS下编译一段这样的css时，未能达到预期的结果，首先是css代码：

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

我这里使用的是SCSS解析，用了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;
  }

显然在带有伪类:hover的那一处是错误的。正确的结果应该是：

.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;
}

可以通过这个在线SASS编译http://sass.js.org/测试。

那么如何才能在PostCSS下得到正确的结果呢，是否有其他插件可以实现，难道只能避免使用这样的SASS写法了吗？

Answer 1

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