css - 将 SASS 占位符用于多色菜单

Question

我有一个包含 4 个元素的菜单。这 4 个元素中的每一个都应该有相似的颜色并且在悬停时表现相同，除了每个元素的基础颜色应该不同。

我认为我可以在 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:last-child。

我可以重新安排它以正确应用它吗？

我一直在寻找我可以做的事情:

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