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

【问题标题】：Extend nested SASS selector inside another SASS file在另一个 SASS 文件中扩展嵌套的 SASS 选择器
【发布时间】：2021-08-26 00:12:47
【问题描述】：

我正在寻找一种方法来减少我的 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;
    }

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

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

有没有办法做到这一点？

【问题讨论】：

只需将两个类都添加到 div 中，不要尝试扩展 .btn-primary.upgrade-btn，只需使用 .upgrade-btn 即可。如果您正确导入它们，CSS 的特异性将完成休息
遗憾的是，这并不容易。寄存器文件中的btn-primary已经覆盖了默认声明，所以我需要扩展覆盖的声明。
你想用@extend 达到什么目的？
@djnetherton 我正在寻找extend 上面代码块中.btn-primary 中.btn-primary.upgrade-btn 定义中的CSS 声明。正如你所看到的，它们共享相同的属性，我宁愿在我的 SASS 中扩展而不是复制它。这可能吗？还是选择器需要在同一个文件中而不是嵌套？

标签： css sass css-selectors oocss

【解决方案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;
}

【讨论】：