css - 使用 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);
        }
    }
   }
}

但是，这也会影响每个 SUBMENU li:last-child。

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

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

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

}

Answer 1

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

Answer 2

也许您想使用 CSS 的直接子选择器>。

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