sass - SCSS Parent Selector 不基于子级将样式应用于父级

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

标签： sass

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>