Esper de Sass et deux parents ensemble dans mixin?

Question

Bonne journée. Des collègues, confrontés à la tâche de thématiser le site. Google a trouvé un mélange approprié. Tout fonctionnerait bien, si ce n'est pour le mixin pour les événements. Il s'avère que j'ai besoin de faire quelque chose, de sorte que si le mixin du sujet est invoqué dans le mixage des événements, alors la classe ne va pas en cascade, mais substituée à la classe de sujet, la classe .no-touchevents sur la balise html. Je serais reconnaissant si vous pouviez aider. Example Idéalement, ce serait donc à la sortie:

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

Answer 1

Il est un peu hacky (ou peut-être beaucoup hacky), mais en ajoutant un paramètre supplémentaire à la mixin themify et à bâtir notre sélecteur manuellement, vous pouvez atteindre la sortie que vous recherchez.

$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') 
    } 
    } 
}