Sass SCSS父选择器未基于子项将样式应用于父项

我试图基于孩子在家长身上应用一个类，但它似乎不起作用

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>

---

您不能使用CSS或SASS遍历DOM。您应该将

活动的
类放在父类上：


.nav-item.active.nav链接{
边框：实心1px灰色！重要；
背景颜色：浅灰色；
}
.资产净值项目a{
颜色：黑色；
字体大小：粗体；
}
.nav-item.active{
左边框：实心3倍绿色；
}


家


轮廓


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