가상 클래스 중첩/SCSS Linter 경고

Question

저는 SCSS에 비교적 익숙하며 linter를 사용하여 기술을 향상 시키려고합니다. 나는이 작은 예제를 가지고 있는데, 부모 메뉴 항목이있을 때만 하위 메뉴를 표시하려고합니다. 이 코드가 작동하는 동안, linter는 "클래스는 부모 Pseudo-class 내에 중첩되어야합니다"라고 설명합니다. 호버 부분 .submenu 부분에 중첩 될 수있다 :

.menu-item { 
 
    .submenu { 
 
    display: none; 
 
    } 
 

 
    &:hover .submenu { 
 
    display: block; 
 
    } 
 
}

<ul> 
 
    <li class='menu-item'> 
 
    <a href=''> 
 
     Menu 1 
 
    </a> 
 
    <ul class='submenu'> 
 
     <li>Submenu 1.1</li> 
 
     <li>Submenu 1.2</li> 
 
    </ul> 
 
    </li> 
 
</ul>

은 내가 어떻게 아무 생각이 없습니다. 도울 수 있니?

Answer 1

SASS 코드는 잘 작동하는 아래의 CSS 코드로 컴파일됩니다. SASS 코드가 CSS로 올바르게 컴파일되고 있는지 확인하십시오.

.menu-item .submenu { 
 
    display: none; 
 
} 
 

 
.menu-item:hover .submenu { 
 
    display: block; 
 
}

<ul> 
 
    <li class='menu-item'> 
 
    <a href=''> 
 
     Menu 1 
 
    </a> 
 
    <ul class='submenu'> 
 
     <li>Submenu 1.1</li> 
 
     <li>Submenu 1.2</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

내가 해결책을 발견하고는 매우 간단했다, 난 그냥 둥지로 가져가 일부 :(

.menu-item { 
 
    .submenu { 
 
    display: none; 
 
    } 
 

 
    &:hover { 
 
    .submenu { 
 
     display: block; 
 
    } 
 
    } 
 
}

<ul> 
 
    <li class='menu-item'> 
 
    <a href=''> 
 
     Menu 1 
 
    </a> 
 
    <ul class='submenu'> 
 
     <li>Submenu 1.1</li> 
 
     <li>Submenu 1.2</li> 
 
    </ul> 
 
    </li> 
 
</ul>