"Resting" & in Sass

Question

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

我的包装纸看起来像这样

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

我

起初看起来很好，但后来我注意到一些瓷砖不见了。问题是框架 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%;
}