SCSS父选择器未根据子项将样式应用于父项

Question

我正在尝试根据孩子在父类上应用类，但这似乎不起作用。

HTML

<ul>
    <li class="nav-item">
        <a class="nav-link active">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link">Profile</a>
    </li>
</ul>

scss

.nav-item {
    $root: &;

    .nav-link.active {
        border: solid 1px gray!important;
        background-color: lightgray;
    }
    
    
    a {
        color: black;
        font-weight: bold;
    }

    &-.nav-link.active {
        #{$root} {
            border-left: solid 3px green;
        }
    }
}

Answer 1

您不能使用CSS或SASS遍历DOM。您应该将active类放在父级上：

.nav-item.active .nav-link {
  border: solid 1px gray!important;
  background-color: lightgray;
}

.nav-item a {
  color: black;
  font-weight: bold;
}

.nav-item.active {
  border-left: solid 3px green;
}

<ul>
  <li class="nav-item active">
    <a class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Profile</a>
  </li>
</ul>