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

也许你想使用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");
    }
 }

使用SASS占位符进行多色菜单

2 个答案: