指南针/ 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; 
}