指南針/ SCSS @每個具有第n個功能

Question

我在添加&時遇到問題：將光標懸停在所需位置的SCSS代碼中。

基本上我有一個非常簡單的菜單，每個LI都有一個類。基本上，我寫的代碼中的下列代碼將正確地在每個類上分配所需的樣式，但我只希望這只是一個懸停事件。

下面是代碼

$menu-style: black #000, blue #6699ff; 

.top-bar-section { 
    @each $menu-color in $menu-style { 
     ul li .#{nth($menu-color, 1)} { 
      border-top:5px solid nth($menu-color, 2); 
     } 
    } 
} 

下面是它產生時加工成CSS

.top-bar-section ul li .black { 
    border-top: 5px solid black; 
} 

.top-bar-section ul li .blue { 
    border-top: 5px solid #6699ff; 
} 

這是我想要的結果，我需要完成

.top-bar-section ul li.black:hover, .top-bar-section ul li.black.active { 
    border-top: 5px solid #333; 
} 

etc.... 

看到問題了嗎？ = [。當我添加&：懸停它向我尖叫，它必須在複合選擇器的開始處說明...

任何想法？

Answer 1

我不知道你在哪裏試圖添加:hover，但它似乎適用於我。

$menu-style: black #000, blue #6699ff; 

.top-bar-section { 
    @each $menu-color in $menu-style { 
     ul li.#{nth($menu-color, 1)}:hover { 
      border-top:5px solid nth($menu-color, 2); 
     } 
    } 
} 

輸出：

.top-bar-section ul li.black:hover { 
    border-top: 5px solid black; 
} 

.top-bar-section ul li.blue:hover { 
    border-top: 5px solid #6699ff; 
}