Combining multiple classes into a single class

Question

I'm converting an old Bootstrap 3 app which contains a lot of elements styled with a well class. In Bootstrap 5, there's no well, and I'm trying a replacement along the lines of class="card text-dark text-bg-light mt-2 mb-3 card-body".

I don't want to manually replace every well, because the current version of the replacement probably isn't quite right. Ideally, I want something like this:

#define well "card text-dark text-bg-light mt-2 mb-3 card-body"

So that I don't have to modify the old HTML at all. Is there some way to do this in CSS? A SASS solution would be good as well.

Answer 1

If you really don't want to write the styles yourself, I suppose a possible solution would be to extend the classes:

.well {
  @extend .card;
  @extend .text-dark;
  @extend .text-bg-light;
  @extend .mt-2;
  @extend .mb-3;
  @extend .card-body;
}

You need to have Boostrap's styles imported into your SCSS file for this to work.

Also be aware the generated CSS will not be very pretty, since this will append the .well class to every selector you extend.