css - マルチカラー メニューに SASS プレースホルダーを使用する

Question

4品のメニューがあります。4 つのアイテムはそれぞれ同じように色付けされ、ホバー時に同じように動作しますが、それぞれの BASE COLOR は異なるはずです。

SASSでこれを行うことができると思ったので、ミックスインを作成しました：

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