SASS-修改类伪[重复]

Question

这个问题已经在这里有了答案：

• 将父选择器附加到Sass 1答案 的末尾

老实说，我对这个问题的标题并不是很具描述性。 很难说出我需要做什么，但是我认为这是一个很常见的用例，因此也许代码是描述的最佳方式。

我需要产生什么

.little-tag:before {
  content: "Generic text";
  /** lots more stuff to setup the little tag **/
}

.special.little-tag:before {
  content: "Special text";
}

.extra-special.little-tag:before {
  content: "Extra special text";
}

我尝试了什么

.little-tag:before {
  content: "Generic text";
  /** lots more stuff to setup the little tag **/

  &.special {
    content: "Special text";
  }

  &.extra-special {
    content: "Extra special text";
  }
}

实际产生了什么

.little-tag:before {
  content: "Generic text";
  /** lots more stuff to setup the little tag **/
}

.little-tag:before.special {
  content: "Special text";
}

.little-tag:before.extra-special {
  content: "Extra special text";
}

我正在使用gulp-sass编译。

简而言之，我正在创建一个伪选择器，将一个标签（不是HTML ，而是一个视觉标签）放入所有具有little-tag类的元素中。 在某些情况下，该可视标记的内容需要根据目标元素具有的另一个类进行更改。 因此，视觉标记在大多数情况下会说通用文本 ，但有些人会说特殊文本，而另一些人会说特殊文本 。

Answer 1

这应该可以达到您的预期结果：

.little-tag {
  &:before {
    content: "Generic text";
    /** lots more stuff to setup the little tag **/
  }

  &.special:before {
    content: "Special text";
  }

  &.extra-special:before {
    content: "Extra special text";
  }
}