时间戳

首页 > 解决方案 > 如何使用断点使 mixin 助手响应？

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

问题描述

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

这是我的 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 代码谢谢你们

标签： csstwitter-bootstrapsass

解决方案

密码笔

我对overscroll-behavior(). 主要是它不再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;
  }
}

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

推荐阅读