僞類嵌套/ SCSS Linter Warning

我對SCSS比較陌生，試圖用棉絨提高我的技能。我有這個小例子，我只想在父菜單項懸停的情況下顯示子菜單。當這段代碼正在工作時，linter給了我一個「類應該嵌套在它的父類僞類中」。僞類嵌套/ SCSS Linter Warning

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

我不知道該怎麼辦：懸停部分可以被嵌套到.submenu部分。你能幫我嗎？

來源

2016-12-30 rcvd

我意見是，棉絨是別人的意見，因此既不是棉花也不是這個評論問題;） –

代碼看起來非常好。你在使用SASS代碼時編譯了嗎？ – aavrug

代碼按預期工作。我只是想知道嵌套是否可以改進。 – rcvd

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

來源

2016-12-30 10:34:54 aavrug

我知道它編譯正確，但我認爲可以將懸停部分以某種方式嵌套到.submenu部分。但我不知道如何選擇這樣做的父母 - 父母元素： – rcvd

我沒有明白你的觀點。 – aavrug

我不關心編譯後的CSS，而是關於sass文件。因爲linter說它應該嵌套，我試圖找出，如何。 – rcvd

我找到了解決方案，它是如此簡單，我不得不窩.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>

來源

2016-12-30 11:01:03 rcvd

僞類嵌套/ SCSS Linter Warning

回答

相關問題