css - 在 SASS 中结合包装和父元素？

Question

我有一个特殊性问题，即来自 CSS 库的样式覆盖了我的 SASS 样式。

我的 HTML 是:

<form class="some-library-class my-form-class">
  <input type="text" class="my-form-class__text">

我的 SASS 是:

.my-form-class {
  //Some wrapper stlyes

  &__text {
    margin: 1rem;
  }
}

但是，库用以下内容覆盖了我的样式:

.some-library-class input[type=text] {
  margin: 2rem;
}

在我去为我整洁的 SASS 添加额外的包装类并创建太多深度之前，或者开始使用 !important; 我想看看是否有一种方法可以修改我现有的 SASS返回的 CSS 是:

.my-form-class .my-form-class__text {
  margin: 1rem;
}

是否有一种简洁的 SASS 方法可以实现上述目标，而又不会过多地破坏我现有的 SASS？

Answer 1

.my-form-class {
  //Some wrapper stlyes

  & &__text {
    margin: 1rem;
  }
}

生成

.my-form-class .my-form-class__text {
  margin: 1rem;
}