scss 断点类工厂mixin for sass

Posted 2021-05-18

// Breakpointify
// =============

@mixin bpify( $sels, $opts: (invert:false, include-vanilla: true, force-vanilla: false) ) {
  
    // TODO: add option to pass in $bp-map

    @if type-of($opts) != map {
        @error "bpify second param must be a map";
    }

    // init options
    $invert: if( map-has-key($opts, "invert"), map-get($opts, "invert"), false ); 
    $invert: if( $invert == true or $invert == "true", true, false );

    $incVanilla: if( map-has-key($opts, "include-vanilla"), map-get($opts, "include-vanilla"), true ); 
    $incVanilla: if( $incVanilla == true or $incVanilla == "true", true, false );

    $forceVanilla: if( map-has-key($opts, "force-vanilla"), map-get($opts, "force-vanilla"), false ); 
    $forceVanilla: if( $forceVanilla == true or $forceVanilla == "true", true, false );

    $bp-map: (
        xs: (0, 767px),
        sm: (768px, 990px),
        md: (991px, 1199px),
        lg: (1200px, 0),
    );

    $bp-list: to-list( $bp-map, "keys" );

    $sels_str: $sels;
    $sels: str-explode($sels, ", ");

    // output vanilla classes
    @if ( ($incVanilla and not $invert) or $forceVanilla ) {
        @each $sel in $sels {
            #{$sels_str} {
                @content;
            }
        }
    }

    // construct media queries
    @each $label, $minmax in $bp-map {

        // min/max variables
        $min: "";
        $max: "";
        $minVal: nth($minmax, 1);
        $maxVal: nth($minmax, 2);
        $hasMin: $minVal != 0;
        $hasMax: $maxVal != 0;

        // construct min-width/max-width rules
        @if $hasMin {
            $min: #{"(min-width: "+$minVal+")"};
            @if $hasMax {
                $min: #{$min+" and "};
            }
        }
        @if $hasMax {
            $max: #{"(max-width: "+$maxVal+")"};
        }

        // begin selectors
        $classes: "";

        @each $sel in $sels {
            // append single breakpoint (.class-md) classes
            @if $invert {
                @each $_label in $bp-list {
                    @if $label != $_label {
                        $nbsp: if($classes == "", "", ", ");
                        $classes: #{$classes+$nbsp+$sel+"-"+$_label};
                    } 
                }            
            }
            @else {
                $nbsp: if($classes == "", "", ", ");
                $classes: #{$classes+$nbsp+$sel+"-"+$label};
            }

            // construct -min and -max classes
            $len: length($bp-list);
            $i: index($bp-list, $label);

            @each $_label in $bp-list {
                $_i: index( $bp-list, $_label );
                $minCond: if( $invert, $i < $_i, $i >= $_i );
                $maxCond: if( $invert, $i > $_i, $i <= $_i );

                @if ( $minCond ) {
                    $classes: #{$classes+", "+$sel+"-"+$_label+"-min"};
                }
                @if ( $maxCond ) {
                    $classes: #{$classes+", "+$sel+"-"+$_label+"-max"};
                }
            }

        }

        
        // output the media query
        @media screen and #{$min+$max} {
            #{$classes} {
                @content;
            }
        }
    }
}

// Helpers
// =======

@function to-list($value, $keep: 'both') {
  $keep: if(index('keys' 'values', $keep), $keep, 'both');

  @if type-of($value) == 'map' {
    $keys: ();
    $values: ();
    
    @each $key, $val in $value {
      $keys: append($keys, $key);
      $values: append($values, $val);
    }

    @if $keep == 'keys' {
      @return $keys;
    } @else if $keep == 'values' {
      @return $values;
    } @else {
      @return zip($keys, $values);
    }
  }

  @return if(type-of($value) != 'list', ($value,), $value);

}

@function str-explode($string, $delimiter: "") {
  $result: ();
  $length: str-length($string);

  @if str-length($delimiter) == 0 {
    @for $i from 1 through $length {
      $result: append($result, str-slice($string, $i, $i));
    }

    @return $result;
  }

  $running: true;
  $remaining: $string;

  @while $running {
    $index: str-index($remaining, $delimiter);

    @if $index {
      $slice: str-slice($remaining, 1, $index - 1);
      $result: append($result, $slice);
      $remaining: str-slice($remaining, $index + str-length($delimiter));
    } @else {
      $running: false;
    }
  }

  @return append($result, $remaining);
}


// EXAMPLE USAGE:
// @include bpify(".testing") {
//     color: red;
//     div {
//         background: #09f;
//         .test {
//             color:green;
//             width:50px;
//             height:100px;
//         }
//     }
// }