Question

老实说，我对这个问题的标题并不是很具描述性。我很难说出我需要做的事情，但我认为这是一个非常常见的用例，所以代码可能是最好的描述方式。

我需要生成什么

.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";
  }
}

SASS - 修改类伪

1 个答案: