Bootstrap4：访问变量？答案

【问题标题】：Bootstrap4: Accessing variables?Bootstrap4：访问变量？
【发布时间】：2021-09-07 04:49:16
【问题描述】：

我从 Bootstrap 3 切换到 Bootstrap 4。我正在使用我在运行时编译的 sass 源。当我更改库时，我的媒体开关开始出现错误，即对于

@media screen and (min-width: $screen-md-min) {
    padding: 40px 50px;
}

我得到错误 未定义变量：“$screen-md-min”。

什么是访问Bootstrap4变量的正确方法？

谢谢你。

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

见the relevant section of the Bootstrap 4 migration documentation.

@screen-* 变量已替换为 $grid-breakpoints 变量以及 media-breakpoint-up()、media-breakpoint-down() 和 media-breakpoint-only() 辅助 Sass 混合。

示例用法：

@include media-breakpoint-up(md) {
    padding: 40px 50px;
}

【讨论】：

这非常适用于 BS4 alpha。不要忘记包括 md 在内的其他可能的断点有：xs、sm、md、lg 和 xl（其中 xl 是作为最新断点添加的）“xl”实际上是以前版本的引导程序中的“lg”。

【解决方案2】：

使用 Bootstrap 4，您可以通过在 .scss 文件中导入 bootstrap/_variables.scss 来使用它：

.your-class-name {
  color: black;

  @media (min-width: map-get($grid-breakpoints, sm)) {
    color: red;
  }

  @media (min-width: map-get($grid-breakpoints, md)) {
    color: blue;
  }

  @media (min-width: map-get($grid-breakpoints, lg)) {
    color: green;
  }

  @media (min-width: map-get($grid-breakpoints, xl)) {
    color: yellow;
  }
}

或者这个：

.your-class-name {
  color: black;

  @include media-breakpoint-up(sm) {
    color: red;
  }

  @include media-breakpoint-up(md) {
    color: blue;
  }

  @include media-breakpoint-up(lg) {
    color: green;
  }

  @include media-breakpoint-up(xl) {
    color: yellow;
  }
}

有关更多详细信息，请查看this 页面部分响应断点。

【讨论】：

【解决方案3】：

在 Bootstrap 4 中，我可以通过以下方式检索 screen-md-min 值：

$grid-breakpoint-sm: map_get($grid-breakpoints, "sm");

我从 bootstrap 的 _variables.scss 文件中发现：

$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

【讨论】：

【解决方案4】：

BS4 将 Less 替换为 Sass。较少使用延迟加载变量，而 Sass 没有。所以你应该在使用它们之前声明你的变量。确保在您的媒体切换之前导入bootstrap/_variables.scss：

@import 'bootstrap/variables';
@media screen and (min-width: $screen-md-min) {
    padding: 40px 50px;
}

【讨论】：

在 BS4alpha 中并非如此
问题是关于 BS4 - 这个答案不是