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