bootstrap 的 scss 源码疑惑

Question

bootstrap的scss源码中有一段代码：

@mixin hover {
  // TODO: re-enable along with mq4-hover-shim
//  @if $enable-hover-media-query {
//    // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
//    @media (hover: hover) {
//      &:hover { @content }
//    }
//  }
//  @else {
    &:hover { @content }
//  }
}

@mixin hover-focus {
  @if $enable-hover-media-query {
    &:focus { @content }
    @include hover { @content }
  }
  @else {
    &:focus,
    &:hover {
      @content
    }
  }
}

令我疑惑的是不论变量 $enable-hover-media-query 是 true 还是 false，最后生成的代码效果似乎都是一样的，为什么还需要用 @if @else 分开呢？

Answer 1

只是写了个预留，看用什么方式来实现 mq4-hover-shim ，
注释里有两种实现方案 你可以实现自己想要的。
// See Media Queries Level 4: https://drafts.csswg.org/medi...
// Currently shimmed by https://github.com/twbs/mq4-h...
只是目前用了 https://github.com/twbs/mq4-h... 这个方案 即 &:hover { @content }