How can I refer to an existing class in SCSS?

Question

I am using Bootstrap 5 & SCSS for my CSS definition. I know I can include p-2 in html for padding. But how can I refer to that padding in SCSS itself? I don't want to override anything, I just want to be able to do, say:

.x {
  color: $gray2;
  padding: //one that is same for p-2 - whatever it is
}

I don't want to give that padding the exact px value, because that might change...

Answer 1

You are most likely looking for the extend property.

Assuming p-2 looks something like this.

.p-2 {
   padding: 2rem;
}

Then using extend on your class

.x {
  @extend .p-2;
  color: $gray2;
}

Would give you this in the final css.

.x {
  padding: 2rem;
  color: $gray2;
}