ミックスインでアンパサンドと2人の両親を一緒にサスペストしますか？

Question

おやすみなさい。同僚、サイトをテーマにする作業に直面した。グーグルが適切なミックスインを見つけました。イベントのミックスインではなくても、すべてがうまくいくはずです。トピックのミックスインがイベントのミックスインで呼び出された場合、クラスはカスケードにはなりませんでしたが、トピッククラスの代わりにhtmlタグの.no-toucheventsクラスが使用されるように、何かをする必要があることが判明しました。もしあなたが助けることができれば、私は感謝しています。 Example 理想的には、出力にそうだろう：

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

Answer 1

それは少しハック（または多分たくさんハック）ですが、themifyミックスインに追加のパラメータを追加し、私たちを構築することにより、手動でセレクタを使用すると、探している出力を得ることができます。

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