css - 在另一个 SASS 文件中扩展嵌套的 SASS 选择器

Question

我正在寻找一种方法来减少我的 SASS 中的重复。我有以下声明，它嵌套在选择器中。

内部register.scss：

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

我想@extend在另一个 SASS 文件中的选择器中使用它，但我不确定这是否可能。

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

当我尝试这样做时，我收到以下错误：

错误：复杂的选择器可能无法扩展。

有没有办法做到这一点？

Answer 1

您将需要删除双类选择器并使用以下方法进行扩展。

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