“休息”＆amp;在萨斯

Question

我正在从另一个项目导入sass类，并希望提供一个包装器来保持这些样式的本地化。

我的包装器看起来像这样

.my-wrapper {
   @include "framework-main"
}

我第一次看起来很好，但后来我发现有些瓷砖丢失了。问题是框​​架sass文件大量使用父引用：&。这适用于他们，但是当我应用包装时，它会被注入到处。

如何才能使包装器成为前缀？

举例说明：

SASS：

.wrapper {

  // reset here somehow, I have no control over the nested code.
  .parent {
    &--child1 &--child2 {
      width: 10%;
    }
  }
}

我想要的是什么：

.wrapper .parent--child1 .parent--child2 {
  width: 10%; 
}

我得到了什么：

.wrapper .parent--child1 .wrapper .parent--child2 {
  width: 10%; 
}

这甚至可能吗？

Answer 1

是的，有可能，您的代码中存在小错误 - 您在.前面不需要&--child，因此不会破坏选择器构造：

.wrapper {

  // reset here somehow
  .parent {
    &--child {
      &--grand-child{
      width: 10%;
      }
    }
  }
}

给出

.wrapper .parent--child--grand-child {
  width: 10%;
}