sass- how to extend a parent selector inside a parent selector

Question

I am trying to extend a parent selector and I do not seam to get it right

.dashboard {
  &-left {
    display: inline-block;
    min-height: 100vh;
    height: 100%;
    width: 280px;
    border-right: 1px solid $gray3;

  }

  &-tabs-buttons {
    text-align: center;
    width: 100%;
    height: 68px;
    line-height: 68px;

    &-default {
      @extend &-tabs-buttons;   <---
      color: $gray5;
    }
    &-clicked{
      @extend &-tabs-buttons;   <---

      color: $gray6;
      background-color: $gray1;

    }
  }

I am getting the following error:

SassError: Parent selectors aren't allowed here. ╷ 26 │ @extend &-tabs-buttons; │ ^^^^^^^^^^^^^^ ╵

How do I extend it properly?

I also tried the following and it didn't work as well: @extend dashboard-tabs-buttons

Thank you, Maya

score 1 · Accepted Answer · answered Mar 27 '22 at 15:59

You can store the parent selector in a variable and extend it with interpolation:

.dashboard {
  &-left {
    display: inline-block;
    min-height: 100vh;
    height: 100%;
    width: 280px;
    border-right: 1px solid $gray3;
  }

  &-tabs-buttons {
    $tabsButtonsSelector: &;

    text-align: center;
    width: 100%;
    height: 68px;
    line-height: 68px;

    &-default {
      @extend #{$tabsButtonsSelector};
      color: $gray5;
    }

    &-clicked {
      @extend #{$tabsButtonsSelector};
      color: $gray6;
      background-color: $gray1;
    }
  }
}

If you don't want to use a variable you need to write the selector directly:

@extend .dashboard-tabs-buttons;

sass- how to extend a parent selector inside a parent selector

1 Answers1