如何使用断点使 mixin 助手响应？

Question

我想让这个 mixin 响应式意味着它会生成媒体查询 基于断点。

这是我的 SCSS 代码：

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

    @mixin overscroll-behavior-auto() {
      -ms-scroll-chaining: chained;
          overscroll-behavior: auto;
    }
    @mixin overscroll-behavior-contain() {
      -ms-scroll-chaining: none;
          overscroll-behavior: contain;
    }
    @mixin overscroll-behavior-none() {
      -ms-scroll-chaining: none;
          overscroll-behavior: none;
    }
    .overscroll-auto {
        @include overscroll-behavior-auto();
    }
    .overscroll-contain {
        @include overscroll-behavior-contain();
    }
    .overscroll-none {
        @include overscroll-behavior-none();
    }

    @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {}
    }

我包括我的 sass 代码谢谢你们

Answer 1

Codepen

我对@9​​87654322@ 的语法做了一些修改。主要是它不再是overscroll-behavior-auto()、overscroll-behavior-contain() 等，而是：

overscroll-behavior($behavior, $breakpoint);

这是必要的，因为你不能生成相同的代码三次，因为你不能生成mixins。

$overscrollBehavior: (
  "auto":    ["chained", "none"   ],
  "contain": ["none",    "contain"],
  "none":    ["none",    "none"   ],
)!default;

$breakpoints: (
  "xs":  0px,
  "sm":  576px,
  "md":  768px,
  "lg":  992px,
  "xl":  1200px,
  "xxl": 1400px,
) !default;


@mixin overscroll-behavior($behavior, $breakpoint) {
  $map: $overscrollBehavior;
  
  @for $i from 1 through length($map) {
    $label: nth(nth($map, $i), 1);
    $values: nth(nth($map, $i), 2);
    
    @if $behavior == $label {
      $map: $breakpoints;
      
      @for $i from 1 through length($map) {
        $bp: nth(nth($map, $i), 1);
        $bpValue: nth(nth($map, $i), 2);
        
        @if $breakpoint == $bp {
          @media (min-width: #{$bpValue}) {
            -ms-scroll-chaining: unquote(nth($values, 1));
            overscroll-behavior: unquote(nth($values, 2));
          }
        }
      }
    }
  }
}

body {
  @include overscroll-behavior(none, xs);
}

@media (min-width: 0px) {
  body {
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
  }
}

如果这不是您想要的，请告诉我！