Search code examples
csssass

How can I refer to an existing class in SCSS?

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...

Solution

  • 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;
}