SASS - Modify class pseudo

Question

To be honest, my title for this question is really not very descriptive. It's so hard to put into words what I need to do, but I think it's a pretty common use-case, so maybe code is the best way to describe.

What I need to generate

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

What I tried

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

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

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

What actually gets produced

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

I'm compiling using gulp-sass.

In short, I'm creating a pseudo selector that puts a tag (not HTML, but literally a visual tag) into all elements that have a class of little-tag. In SOME circumstances the contents of this visual tag needs to change depending on another class that the target element has. So the visual tag will say Generic text for most, but some will say Special text and some others will say Extra special text.

Also related: http://stackoverflow.com/questions/28593476/modifying-the-middle-of-a-selector-in-sass-adding-removing-classes-etc — cimmanon, Dec 01 '15 at 23:14

score 0 · Answer 1 · answered Dec 01 '15 at 23:12

This should achieve your intended results:

.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 - Modify class pseudo

1 Answers1