Sass Ampersand und zwei Eltern zusammen in Mixin?

Question

Guten Tag. Kolleginnen und Kollegen, vor der Aufgabe, die Website zu sehen. Googeln fand ein passendes Mixin. Alles würde gut funktionieren, wenn nicht für die Veranstaltung. Es stellt sich heraus, dass ich etwas tun muss, damit, wenn das Mixin des Themas beim Mixen von Events aufgerufen wird, die Klasse nicht kaskadiert wird, sondern die Topic-Klasse, die .no-touchevents-Klasse im html-Tag ersetzt. Ich wäre Ihnen dankbar, wenn Sie mir helfen könnten. Example Ideal, das wäre so am Ausgang:

.card { 
 
    color: #fff; 
 
} 
 
.t-dark .card { 
 
    color: #000; 
 
} 
 
.no-touchevents .card:hover { 
 
    color: #000; 
 
} 
 
.t-dark.no-touchevents .card:hover { 
 
    color: #fff; 
 
}

Answer 1

Es ist ein wenig hacky (oder vielleicht viel Hacky), sondern durch einen zusätzlichen Parameter zum Themify mixin Hinzufügen und unsere Gebäude Selektor manuell, können Sie die Ausgabe erreichen, die Sie suchen.

$themes: (
    dark: (
     colorDark: #000, 
     colorLight: #fff 
    ) 
); 
@mixin on-event() { 
    .no-touchevents &:hover { 
     @content; 
    } 
} 
@mixin themify($themes, $flat: ' ') { // Add a parameter to separate by default 
    @each $theme, $map in $themes { 
     @at-root .t-#{$theme}#{$flat}#{&} { // Build our selector manually 
      $theme-map:() !global; 
      @each $key, $submap in $map { 
       $value: map-get(map-get($themes, $theme), '#{$key}'); 
       $theme-map: map-merge($theme-map, ($key: $value)) !global; 
      } 
      @content; 
      $theme-map: null !global; 
     } 
    } 
} 

@function themed($key) { 
    @return map-get($theme-map, $key); 
} 

.card { 
    color: #fff; 
    @include themify($themes) { 
     color: themed('colorDark') 
    } 
    @include on-event() { 
    color: #000; 
    @include themify($themes, '') { // Tell themify not to separate selectors 
     color: themed('colorLight') 
    } 
    } 
}