scss - starting a partially named class

Question

I was wondering if it was possible to have a partially completed class name, which then I could fill in some how e.g.

.theme-color-* {
  happy {
    color: yellow
  }
  angry {
    color: red
  }
  sad {
    color: blue
  }
}

of course, this represents .theme-color-happy, .theme-color-angry, .theme-color-sad

Answer 1

Yes, you can do that, but you have to use &:

.theme-color- {
  &happy {
    color: yellow
  }
  &angry {
    color: red
  }
  &sad {
    color: blue
  }
}