Extend nested SASS selector inside another SASS file

Question

I am looking for a way to reduce the repetition in my SASS. I have the following declaration, which is nested inside a selector.

Inside register.scss:

        .btn-primary {
            background-color: $brand-btn-primary;
            color: #FFFFFF;
            font-size: 16px;
            line-height: 24px;
        }

I would like to @extend that inside the selector in another SASS file but i'm unsure if that's possible.

admin.scss:

    .btn-primary.upgrade-btn {
        font-family: Helvetica;
        background-color: $brand-btn-primary;
        color: #FFFFFF;
        font-size: 16px;
        line-height: 24px;
        border: 1px solid $brand-btn-primary;
        min-width: 160px;
    }

When I have attempted this I get the following error:

Error: complex selectors may not be extended.

Is there a way to do this?

Answer 1

You will need to remove the double class selector and extend using the method below.

.btn-primary {
  background-color: $brand-btn-primary;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
}
.upgrade-btn {
  @extend .btn-primary;
  font-family: Helvetica;
  border: 1px solid $brand-btn-primary;
  min-width: 160px;
}