我正在尝试在我的项目中使用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; }
解决方法
你可以使用$map-get ..
@media (min-width: map-get($grid-breakpoints,xs)) and (max-width: map-get($grid-breakpoints,sm)){ [class*='col-'] { font-size: 20px; } }
Bootstrap 4中还有几个断点混合,可用于定位特定断点……
@include media-breakpoint-between(sm,md){ ... } @include media-breakpoint-only(lg){ ... }