bootstrap媒体查询mixins

Question

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

example Bootstrap mixin

Answer 1

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

result

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

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