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

如何通过SASS将变体类.navbar添加到子类.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-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-dark {
  background-color: red;
}