擬似クラスネスト/ SCSSリンター警告

Question

私はSCSSには比較的新しいので、リンターを使用してスキルを向上させようとしています。私はこの小さな例を持っています。ここでは、親メニュー項目が上がっている場合にだけサブメニューを表示したいと思います。このコードが動作している間、リンターは私に "クラスは親の擬似クラスの中に入れ子にされるべきです"と言います。ホバー部分.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>