Bootstrap4:访问变量？

Question

我从Bootstrap 3切换到Bootstrap 4.我正在使用sass源代码,我在运行时编译.当我更改库时,我开始在我的媒体交换机上出错,即for

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

我得到错误 未定义的变量:"$ screen-md-min".

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

感谢你.

Answer 1

请参阅Bootstrap 4迁移文档的相关部分.

该@screen-*变量已经换成了$grid-breakpoints与一起变量media-breakpoint-up(),media-breakpoint-down()以及media-breakpoint-only()帮助萨斯混入.

用法示例:

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

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

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

Answer 3

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

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