css - 如何在父类选择器中引用某些级别以添加变体？

Question

如何通过 SASS 从子类 .dropdown-toggle 将变体类 .navbar-dark 添加到 .navbar？

我试图做到这一点：

.nav-wrapper .navbar.navbar-dark .nav-item > .nav-link.dropdown-toggle

.nav-wrapper{
  .navbar {
    $navbar: #{&};

    .nav-item{
      > .nav-link{

        &.dropdown-toggle{

          @at-root #{$navbar}.navbar-dark & {
            background-color: red;
          }
        }
      }
    }
  }
}

给出：

.nav-wrapper .navbar.navbar-dark .nav-wrapper .navbar .nav-item > .nav-link.dropdown-toggle {
  background-color: red;
}

和

.nav-wrapper{
  .navbar {
    $navbar: #{&};

    .nav-item{
      > .nav-link{

        &.dropdown-toggle{

          @at-root #{$navbar}.navbar-dark {
            background-color: red;
          }
        }
      }
    }
  }
}

给出：

.nav-wrapper .navbar.navbar-dark {
  background-color: red;
}

标签： csssass