Блог

Итак, предположим, что у меня есть следующий код

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

Тогда мой SCSS будет выглядеть примерно так:

 .list {
    amp;__wrapper {

    }    

    amp;__menu {

    }
    ...
}
 

проблема:

Я хочу создать эффект наведения на li, который будет содержать list_link и некоторые другие элементы, но я хочу изменить цвет ТОЛЬКО на класс list__link, и мне интересно, как наиболее эффективно это сделать в SCSS.

Мое текущее решение (которое мне не очень нравится)

 .list {
    amp;__item {
        amp;:hover {
            .list__link {
                 color: $secondary
            }
        }
    }    
}
 

Я уверен, что делаю что-то не так, потому что мне кажется, что я нарушаю то, что должно быть в SCSS и BEM, но до сих пор я не нашел решения.

Вы можете просто выбрать этот селектор, выполнив следующие действия:

 .list {
  amp;__item:hover .list__link {
    color: $secondary;
  }
}