sass- 如何在父选择器中扩展父选择器

Question

我正在尝试扩展父选择器，但我没有拼接以使其正确

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

    }
  }

我收到以下错误：

SassError：此处不允许使用父选择器。 ╷ 26 │ @extend &-tabs-buttons; │ ^^^^^^^^^^^^^^ ╵

如何正确扩展它？

我也尝试了以下方法，但效果不佳：@extend dashboard-tabs-buttons

谢谢，玛雅

Answer 1

您可以将父选择器存储在变量中并使用插值扩展它：

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

如果您不想使用变量，您需要直接编写选择器：

@extend .dashboard-tabs-buttons;

sass- 如何在父选择器中扩展父选择器

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

sass

extend

parent-selector