믹스 인으로 앰퍼샌드와 두 부모를 함께 보내시겠습니까?

Question

안녕하세요. 동료들을 대상으로 사이트를 주제로 작업합니다. 인터넷 검색을 통해 적합한 믹스 인을 발견했습니다. 이벤트 믹스 인이 아니라면 모든 것이 잘 될 것입니다. 내가 뭔가를해야한다는 것이 밝혀 지므로 주제 mixin이 이벤트 믹스에서 호출되면 클래스가 계단식으로 진행되지 않고 주제 클래스 인 hno 태그의 .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') 
    } 
    } 
}