html - 如何在 SASS 中使用 Bootstrap 4 媒体断点?

标签 html css twitter-bootstrap sass bootstrap-4

<分区>

官方上bootstrap website它说:

Since we write our source CSS in Sass, all our media queries are available via Sass mixins:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

现在,我正在为我的 CSS 使用 SASS,我也在使用 Bootstrap,但我只是通过将它们包含在 HTML 中来结合这两者。

当我尝试在我的 SASS 文件中做这样的事情时:

@include media-breakpoint-up(xl) { ... }

我得到一个错误:

Undefined Mixin

我猜这是因为我的 SASS 文件不知道 Bootstrap,因为我只在 HTML 中包含了 Bootstrap。

如何将 Bootstrap 4 作为部分文件包含到我的 SASS 文件中? (我想这就是我必须做的......)

PS:我正在使用 Bootstrap 4,我更喜欢不需要 Bower 或 RubyGems 等的解决方案,只需下载 Bootstrap 文件并以老式方式将其包含到我的 SASS 中 - 如果可能的话全部?

最佳答案

下载整个源代码,并在 scss/mixins 中查找。文件 _breakpoints.scss 是您应该拥有的文件。我做同样的事情,我下载源代码并将我需要的东西包含在我自己编译的 css 中。

@import "_variables";
@import "_mixins";
@import "_grid";

关于html - 如何在 SASS 中使用 Bootstrap 4 媒体断点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44497740/

相关文章:

javascript - 我可以从 JavaScript 更改 CSS 滚动行为吗?

javascript - 如何修改工具提示内容字体大小?

javascript - bootstrap input-prepend 使两个 div 内联(在同一行中),没有新行

html - 在图像旁边创建垂直菜单

html - 左侧边框未显示在菜单栏上

html - 为什么子 div 不超出 flex 行容器

html - 双普通和大型菜单

javascript - 使用 Ajax 更新 href ID

html - Bootstrap - 垂直对齐多个表单

javascript - 如何在 Bootstrap 中使 Instagram.js 提要响应?