scss 使用Sass地图的响应断点

Posted 2021-05-18

// Breakpoints
$breakpoints: (
  'sm':  480px,
  'sm+': 640px,
  'md':  768px,
  'md+': 1024px,
  'lg':  1280px,
  'lg+': 1440px,
  'xl':  1600px,
  'xl+': 1920px,
);

@function col-span($span, $cols: 12) {
  $full-width: 100%;
  
  @if not $span or type-of($span) != 'number' {
    @return $full-width;
  }
  
  @return $full-width * ($span / $cols);
}

@mixin breakpoint($breakpoint) {
  @if not variable-exists('breakpoints') or not map-has-key($breakpoints, $breakpoint) {
    @warn '`#{$breakpoint}` is not a valid breakpoint name.';
  }
  @else {
    @media(min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

// Example usage:
.element {
  width: col-span();

  @include breakpoint('sm') {
    width: col-span(6);
  }
  
  @include breakpoint('md') {
    width: col-span(4);
  }
  
  @include breakpoint('lg+') {
    width: col-span(3); 
  }
  
  @include breakpoint('xl+') {
    width: col-span(2); 
  }
}