Question

美好的一天。同事们，面临主题网站的任务。谷歌搜索找到了合适的混合物。如果不是因为事件的混合，一切都会很好。事实证明我需要做一些事情，所以如果在混合事件中调用主题的mixin，那么该类不会级联，而是替换主题类，.no-touchevents类html标签。如果你能提供帮助，我将不胜感激。 Example 理想情况下，输出会如此：

＆＃13;

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

＆＃13;

Answer 1

它有点hacky（或者可能很多hacky）但是通过在themify mixin中添加一个额外的参数并手动构建我们的选择器，你可以实现你正在寻找的输出。

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

Sass＆符号和两个父母一起在mixin？

1 个答案: