css - 引导媒体查询混合

Question

我最近自学了如何使用 Bootstrap，并且我正在尝试使用可用作 Sass 混合宏的响应式媒体查询(请注意，我以前从未使用过 Sass)。我无法使 @include media-breakpoint 查询正常工作。下面的屏幕截图显示了我如何尝试在 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;
    }
}