我正在尝试在我的项目中使用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){
...
}
