Pass @ Mixin als Parameter

Question

Ich habe eine mixin, die an mehreren Stellen verwendet wird. Ich würde gerne wissen, ob es auch möglich ist, diese mixin als Parameter zu übergeben. Dies ist ein Beispielcode von mir:

.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%); 
        } 
       } 
      } 
     } 
    } 
} 

Wenn Sie die scroll-content Bereich sehen, ist immer die gleiche außer Hut sind die Farbwerte sind unterschiedlich. Wie kann ich den obigen Code vereinfachen?

Answer 1

Sie könnten versuchen, mit scss @each Schleife und Hashes zu arbeiten. Zum Beispiel:

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