css - "Resting"& 在 Sass 中

Question

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

我的包装看起来像这样

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

一开始我看起来还不错，但后来我发现有些瓷砖不见了。问题在于框架 sass 文件大量引用父级:&。这对他们来说很好，但是当我应用包装器时，它会被注入(inject)到各处。

如何使包装器仅成为前缀？

举例说明:

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