media-queries - 冒泡不起作用，Sass 在尝试使用 @mixin 和 @content 时将类注入嵌套元素内部而不是围绕它们

Question

我@content在 mixins 中使用来简化媒体查询。如果我在嵌套类中使用第一个 mixin，输出会冒泡并嵌套类。第二个示例根本不起作用（没有错误），嵌套似乎无法正常工作。

这工作正常

// Everything larger than a landscape tablet but less than or equal to the desktop

@mixin desktop-only {

    @media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
        @content;
    }

    .lt-ie9
    {
        @content;
    }
}

这不起作用

@mixin ie8 {

    .lt-ie9
    {
        @content;
    }

}

Answer 1

您的 mixin 看起来对我有用：

.foo {
    @include ie8 {
        color: red;
    }
}

输出与我期望的完全一样：

.foo .lt-ie9 {
  color: red;
}

由于您的问题没有提供任何有用的信息来说明为什么 mixin 是错误的，所以我假设您想要的是以相反的顺序排列这些类。在这种情况下，你的 mixin 需要这样写：

@mixin ie8 {
    .lt-ie9 & {
        @content;
    }
}

输出：

.lt-ie9 .foo {
  color: red;
}