Bootstrap v4网格大小/ Sass列表

Question

我正在尝试在我的项目中使用Bootstrap v4变量，但它存储在一个数组（_variables.scss）中：

$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

我怎样才能在我的sass中引用它：

@media(max-width: $grid-breakpoints[xs]) {
  font-size: 20px;
}

Answer 1

您可以使用$map-get ..

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
  [class*='col-'] {
    font-size: 20px;
   }
}

<强> $grid-breakpoints demo

Bootstrap 4中还有几个断点mixin可用于定位特定的断点......

@include media-breakpoint-between(sm, md){
  ...
}

@include media-breakpoint-only(lg){
  ...
}

<强> media-breakpoint mixin demo