scss 简单的断点混合

Posted 2021-05-18

/// Simple Breakpoint Mixin
///
/// Takes list of arguments to define media queries
///
/// @author Niklas Postulart
/// @group layout
/// @param {Lists} $lists - Lists of queries
/// @example
///   .example {
///     @include breakpoint(min 100px, max 30rem) {
///       font-weight: bold;
///     }
///   }
///   
///   // Outputs
///   @media only screen and (min-width: 100px) and (max-width: 30rem) {
///     .example {
///       font-weight: bold;
///     }
///   }

@mixin breakpoint($lists...) {
  $media: only screen;

  @each $list in $lists {
    @if length($list) == 1 {
      $media: append($media, "and (min-width: #{$list})");
    } @else if length($list) == 2 {
      @if nth($list, 1) == max {
        $media: append($media, "and (max-width: #{nth($list, 2)})");
      } @else {
        $media: append($media, "and (min-width: #{nth($list, 2)})");
      }
    } @else {
      @error 'Too many arguments set for breakpoint';
    }
  }

  @media #{$media} {
    @content;
  }
}

/// Same as breakpoint mixin but only use one list
///
/// @author Niklas Postulart
/// @group layout
/// @param {List} $list - Query list
/// @requires breakpoint
/// @example
///   .example {
///     @include on(min 100px) {
///       font-weight: bold;
///     }
///   }
///   
///   // Outputs
///   @media only screen and (min-width: 100px) {
///     .example {
///       font-weight: bold;
///     }
///   }

@mixin on($list) {
  @include breakpoint($list) {
    @content;
  }
}

/// Wrapper for breakpoint mixin, uses only 2 breakpoints min and max
///
/// @author Niklas Postulart
/// @group layout
/// @param {Number} $min - min-width
/// @param {Number} $max - max-width
/// @requires breakpoint
/// @example
///   .example {
///     @include breakpoint(100px, 200px) {
///       font-weight: bold;
///     }
///   }
///   
///   // Outputs
///   @media only screen and (min-width: 100px) and (max-width: 200px) {
///     .example {
///       font-weight: bold;
///     }
///   }

@mixin between($min, $max) {
  @include breakpoint(min $min, max $max) {
    @content;
  }
}