引导媒体查询混合

Question

我最近自学了如何使用 Bootstrap，并且我正在尝试使用可作为 Sass mixin 使用的响应式媒体查询（请注意，我以前从未使用过 Sass）。我无法让@include 媒体断点查询工作。下面的屏幕截图显示了我如何在 Atom 中尝试使用它的示例。在我看来，Atom 无法识别语法，即使 Bootstrap cdn 链接到我的索引文件。我错过了什么？谢谢。

example Bootstrap mixin

Answer 1

下面是一个与 Bootstrap 的屏幕大小变量集成的 mixin 示例。您总是可以用您自己的自定义大小替换变量。

@mixin tablet {
    @media (min-width: #{$screen-sm}) {
        @content;
    }
}

下面是一个如何在样式表中使用它的示例：

.foo {
    font-size:16px;
    padding: 15px;

    @include tablet {
        font-size: 18px;
        padding: 20px;
    }
}