So, let's say that I have the following code
<div class="list">
<div class="list__wrapper">
<ul class="list__menu">
<li class="list__item">
<a class="list__link">Link</a>
<p class="list__description">Desc</p>
</li>
</ul>
</div>
</div>
My SCSS would then look something like this:
.list {
&__wrapper {
}
&__menu {
}
...
}
PROBLEM:
I want to create a hover effect over li which will hold list_link and some other elements, but I want to change color ONLY to list__link class and I'm wondering how to most effectively do that in SCSS.
My current solution (which I don't like very much)
.list {
&__item {
&:hover {
.list__link {
color: $secondary
}
}
}
}
I'm sure that I'm doing something wrong because it feels like I'm breaking what should be SCSS and BEM advangates, but so far I haven't found a solution.
You can simply this selector by doing the following:
.list {
&__item:hover .list__link {
color: $secondary;
}
}