изменения классов при наведении курсора мыши, но никакого эффекта

Question

Я пытаюсь создать выпадающее меню с JS и СКС, я могу видеть, что класс не делает изменения в моей консоли разработчика, но что нет никакого эффекта

вот SCSS

a{ 
    text-decoration: none; 
    width: 15%; 
    height: 100%; 
    transition: 0.5s ease; 
    background-color: rgba(241, 235, 235, 0.62); 
    display: inline-block; 

    .expanded{ 
     height: 20em; 
     transition: 0.5s ease; 
    } 
    } 

JS

for(var i = 0; i < a.length; i++){ 
    a[i].onmouseover = function(){ 
     this.classList = "expanded"; 
    } 
    a[i].onmouseleave = function(){ 
     this.classList.remove("expanded") 
    } 
    } 

Answer 1

У вас не хватает "&":

a{ 
    &.expanded{ 
    } 
}