如何根据应用的动态类更改mixin值

Question

我创建了一个简单的mixin来对悬停和焦点进行分组。现在，实际上，我只想在用户使用键盘在站点上切换时才将焦点放在mixin上。如何做到这一点？

我原来的混音

@mixin hover { &:hover, &;focus { @content; }}

我想更新的内容（类似这样的东西）

@mixin hover { &:hover { @content; }}

body.user-tabbing {
    @mixin hover { &:hover, &:focus { @content; }}
}

Answer 1

像您这样的声音只想提供用于分离:hover和:focus选择器的条件功能，诸如此类；

@mixin user-cue($type) {

   @if ($type == hover) {
      &:hover { @content }
   }
   @if ($type == focus) {
      &:focus { @content }
   }
   @else {
      &:hover, &:focus { @content }
   }

}

然后使用场景；

.class1 { @mixin user-cue(hover) { color: red }   // Hover only
.class2 { @mixin user-cue(focus) { color: green } // Focus only
.class3 { @mixin user-cue() { color: blue }       // Both Hover & Focus

哦，在您的示例中，body.selector是多余的，您可能会丢失body.部分。希望这会有所帮助，加油。