css - rails - Tamaños de cuadrícula Bootstrap v4/Lista Sass

bootstrap-sass 4 npm

Question

Estoy tratando de usar las variables de bootstrap v4 en mi proyecto, pero está almacenado dentro de una matriz (_variables.scss):

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

¿Cómo puedo referirme a esto en mi sass:

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

por favor, ayúdame :(

Answer 1

Puedes usar $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

También hay varias mezclas de punto de interrupción en Bootstrap 4 que se pueden utilizar para apuntar a un punto de interrupción específico ...

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

media-breakpoint mixin demo