パラメータとして@mixinを渡す

Question

私はmixinをいくつかの場所で使用しています。私はパラメータとしてこのmixinを渡すことも可能かどうかを知りたいと思います。これは私のコードサンプルです：

.modules-component { 
    ion-content { 
     &.math { 
      @include scroll-content(ocean); 

      scroll-content { 
       ion-item-group { 
        ion-item:nth-child(3) { 
         @include linear-gradient(to left, color($colors, lagoon) 15%, color($colors, ocean) 100%, color($colors, ocean) 100%); 
        } 
       } 
      } 
     } 

     &.english { 
      @include scroll-content(meadow); 

      scroll-content { 
       ion-item-group { 
        ion-item:nth-child(3) { 
         @include linear-gradient(to left, color($colors, lemon) 15%, color($colors, meadow) 100%, color($colors, meadow) 100%); 
        } 
       } 
      } 
     } 

     &.german { 
      @include scroll-content(petal); 

      scroll-content { 
       ion-item-group { 
        ion-item:nth-child(3) { 
         @include linear-gradient(to left, color($colors, lilac) 15%, color($colors, petal) 100%, color($colors, petal) 100%); 
        } 
       } 
      } 
     } 
    } 
} 

あなたはscroll-content面積が常に同じで表示された場合は色の値が異なっている帽子以外が含まれます。上記のコードを単純化するにはどうすればよいですか？

Answer 1

scss @eachループとハッシュを試してみることができます。例：

ion-content { 
    @each $class, $color in (("english": "meadow"), ("math": "ocean"), ("german": "petal")) { 
     &.#{$class} { 
      @include scroll-content($color); 

      scroll-content { 
       ion-item-group { 
        ion-item:nth-child(3) { 
         @include linear-gradient(to left, color($colors, lemon) 15%, color($colors, $color) 100%, color($colors, $color) 100%); 
        } 
       } 
      } 
     } 
    } 
}