薩斯＆和兩個父母一起在mixin中？

Question

美好的一天。同事們面臨着主題網站的任務。谷歌搜索發現一個合適的mixin。一切都會很好，如果不是混合事件。事實證明，我需要做一些事情，所以如果在混合事件中調用了主題的mixin，那麼該類不會級聯，而是替代主題類，即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') 
    } 
    } 
}