Compass / SCSS @each with nth function

Question

I'm having trouble adding &:hover into my SCSS code in the desired place.

Basically I have a very simple menu with a class on each of the LI's. Basically the following bit of code I have written will correctly assign the desired style on each class although I only want this to be only a hover event.

Here is the code

$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);
        }
    }
}

Here is what it generates when processed into CSS

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

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

Here is my desired result, that I need to accomplish

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

etc....

See the issue right? =[ . When I add in &:hover it screams at me that it must be stated at the start of a compound selector...

Any ideas?

Answer 1

I'm not sure where you were trying to add the :hover, but it seems to work for me.

$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);
        }
    }
}

Output:

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

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