使用SASS佔位符多色菜單

Question

我有一個包含4個項目的菜單。 4個項目中的每一個都應該類似地着色並且在懸停時表現相同，除了每個項目的BASE COLOR應該是不同的。

我想我可以在SASS做到這一點，所以我創建了一個mixin：

@mixin boxmenuitem($color:#D49A15) { 
background-color: lighten($color, 20%);; 
@include background-image(linear-gradient($color, darken($color, 10%))); 
&:hover { 
    background-image: none; 
    li { 
     background-image: none; 
     &:hover { 
      background-color: darken($color, 10%) ; 
     } 
    } 
    } 
} 

我申請它是這樣（所有無關的菜單代碼中刪除）：

.menu-class { 
ul { 
    li { 
     @include boxmenuitem; 
     &:last-child { 
      @include boxmenuitem(#ff0000); 
     } 
    } 
    } 
} 

然而，這也會影響每一位子女：最後一個孩子。

我可以重新安排這種方式來正確應用它嗎？

我一直在尋找的東西，我可以做這樣的：

li { 
    @include boxmenuitem; 
    &:nth-child(1) { 
     @include boxmenuitem(blue); 
    } 
    &:nth-child(2) { 
     @include boxmenuitem(green); 
    } 
    ...etc... 

} 

Answer 1

也許你想使用CSS >的直接子選擇器。

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

FWIW，我想起來這樣做：

@mixin boxmenuitem($color:#D49A15, $image:"bg-prac-home-crim.jpg") { 
    @include background-image(linear-gradient($color, darken($color, 10%))); 
    @include box-shadow(2px 2px 6px rgba(0,0,0,.5)); 
    border-width: 1px; 
    border-style: solid; 
    border-color: lighten($color,10%) darken($color,20%) darken($color,20%) lighten($color, 10%); 
    .home & { // only home page has an image 
    @include background-image(
     url("assets/images/"+$image), 
     linear-gradient($color, darken($color, 10%))); 
    background-position: center 35px, left top; 
    background-repeat: no-repeat,repeat; 
    height: 150px; 
    &:hover { 
     @include background-image(
      url("assets/images/bg-prac-home-crim.jpg"), 
      linear-gradient(lighten($color, 10%), darken($color, 1%))); 
    } 
    li { 
     &:hover { 
      background-color: darken($color, 10%) ; 
     } 
    } 
} 
} 

然後將其應用到只有直系後代：

.second-menu-class { 
@include clearfix; 
// first level LI 
>ul>li { 
    &:first-child { 
       @include boxmenuitem; 
    } 
    &:nth-child(2) { 
     @include boxmenuitem(#67A2A6, "bg-prac-home-empl.jpg"); 
    } 
    &:nth-child(3) { 
     @include boxmenuitem(#4D4D4D, "bg-prac-home-real.jpg"); 
    } 
    &:last-child { 
     @include boxmenuitem(#843C3F, "bg-prac-home-family.jpg"); 
    } 
}