Bootstrap4:访问变量？

Question

我从Bootstrap 3切换到Bootstrap 4，我使用的是在运行时编译的sass源代码。当我更改库时，我开始收到媒体开关上的错误，即

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

我得到了错误的未定义变量：“$screen min”.

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

谢谢你。

Answer 1

通过在.scss文件中导入引导程序/_variables.scss，您可以像这样使用引导程序4：

.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;
  }
}

请查看更多详细信息，查看这页面响应断点。

Answer 2

在引导程序4中，我可以通过以下操作检索屏幕-md-min值：

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

我从引导程序的_variables.scss文件中发现了这一点：

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

Answer 3

BS4用Sass代替了Less。对于变量使用较少的延迟加载，而Sass则不使用。因此，在使用变量之前，您应该声明它们。确保在媒体切换之前导入bootstrap/_variables.scss：

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