我有以下 HTML:
<ul id="navbar-main" class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="https://travian.dev/materials" class="nav-link nav-materials">
<span class="invisible">Materials</span>
</a>
</li>
</ul>
以及以下 SCSS:
#navbar-main {
li {
&.nav-item {
.nav-link {
width: 50px;
height: 50px;
background: no-repeat center;
background-size: contain;
&.nav-materials {
background-image: url('../images/buttons/menu-materials.png');
}
}
&.active {
.nav-link {
&.nav-materials {
background: red;
}
}
}
}
}
}
这是可行的,但我希望它更易于维护/更易于阅读。如果可能的话,我希望它是这样的:
#navbar-main {
li {
&.nav-item {
.nav-link {
width: 50px;
height: 50px;
background: no-repeat center;
background-size: contain;
&.nav-materials {
background-image: url('../images/buttons/menu-materials.png');
.active { // here something to actually select .nav-item.active .navlink.nav-materials
background: red;
}
}
}
}
}
}