sutty-base-jekyll-theme/_sass/snap.scss

////
/// @group Snap
////

/// _Snap_ es una forma de hacer que los elementos se alineen
/// automáticamente a partes de su contenedor durante el _scroll_.  Si le
/// usuarie _scrollea_ hasta la mitad, el navegador continua el _scroll_
/// hasta que se alinee.  Es útil para presentaciones de diapositivas
/// (como el sitio de Sutty) o _banners_ con navegación horizontal
/// (_sliders_).
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
$snap-types: (none, mandatory, proximity);
/// Ejes
$snap-directions: (y, x);
/// Puntos de alineación
$snap-points: (start, end, center, none);

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
/// Obtiene el sufijo para cada clase responsive usando mixins de
/// Bootstrap.  Valores posibles:
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
/// `-md`, `-lg`, `-xl`.
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $snap-type in $snap-types {
      @each $snap-direction in $snap-directions {
/// El contenedor indica la dirección y obligatoriedad del snap
///
/// @example html
///   <div class="snap-mandatory-y snap-proximity-md-y"></div>
        .snap-#{$snap-type}#{$infix}-#{$snap-direction} {
          scroll-snap-points-#{$snap-direction}: repeat(100%);
          scroll-snap-destination: 0 0;

          @each $prefix in $vendor-prefixes {
            #{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
            #{$prefix}scroll-snap-type: #{$snap-type};
          }

          @each $snap-point in $snap-points {
/// Los elementos que son descendientes directos se alinean a
/// su contenedor
///
/// @example html
///   <div class="snap-mandatory-y snap-proximity-md-y">
///     <div class="snap-start"></div>
///     <div class="snap-center"></div>
///     <div class="snap-end"></div>
///   </div>
            & > .snap-#{$snap-point} {
              scroll-snap-align: #{$snap-point};
            }
          }
        }
      }
    }
  }
}