<commit_before>/*
  usage:

  @include breakpoint(mobile) {
    margin: 20px;
  }
*/

$breakpoints: (
  "mobile-portrait"     : "only screen and (max-width:400px)",
  "mobile"              : "only screen and (max-width:740px)",
  "not-mobile"          : "only screen and (min-width:741px)",
  "tablet-portrait"     : "only screen and (max-width:850px)",
  "tablet"              : "only screen and (max-width:1050px)",
  "not-tablet"          : "only screen and (min-width:1051px)",
  "desktop"             : "only screen and (min-width:1051px)",
  "retina"              : "only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)",
  "highres"             : "print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)",
  "print"               : "print"
) !default;

// adapted snipped form Hugo Giraudel: http://www.sitepoint.com/cross-media-query-extend-sass/
@mixin breakpoint($breakpoint) {
  // Get the width from the keyword `$breakpoint`
  // Or `null` if the keyword doesn't exist in `$breakpoints` map
  $value: map-get($breakpoints, $breakpoint);

  // If `$breakpoint` exists as a key in `$breakpoints`
  @if $value != null {
    // Open a media query block
    @media #{$value} {
      // Let the user dump content
      @content;
    }
  }

  // If `$breakpoint` doesn't exist in `$breakpoints`,
  // Warn the user and do nothing
  @else {
    @warn "Invalid breakpoint `#{$breakpoint}`.";
  }
}

// creates a json out of `$breakpoints`
$mediaJSON: '{';
@each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $value: nth($breakpoint, 2);
    $mediaJSON: $mediaJSON + '"#{$name}":"#{$value}",' !global;
}
$mediaJSON: str-slice( $mediaJSON, 1, str-length($mediaJSON) - 1);
$mediaJSON: $mediaJSON + '}';

.js-breakpoint {
  content: "#{$mediaJSON}";
}<commit_msg>Adds comments to the scss<commit_after>/*
  usage:

  @include breakpoint(mobile) {
    margin: 20px;
  }
*/

$breakpoints: (
  "mobile-portrait"     : "only screen and (max-width:400px)",
  "mobile"              : "only screen and (max-width:740px)",
  "not-mobile"          : "only screen and (min-width:741px)",
  "tablet-portrait"     : "only screen and (max-width:850px)",
  "tablet"              : "only screen and (max-width:1050px)",
  "not-tablet"          : "only screen and (min-width:1051px)",
  "desktop"             : "only screen and (min-width:1051px)",
  "retina"              : "only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)",
  "highres"             : "print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)",
  "print"               : "print"
) !default;

// adapted snipped form H<NAME>: http://www.sitepoint.com/cross-media-query-extend-sass/
@mixin breakpoint($breakpoint) {
  // Get the width from the keyword `$breakpoint`
  // Or `null` if the keyword doesn't exist in `$breakpoints` map
  $value: map-get($breakpoints, $breakpoint);

  // If `$breakpoint` exists as a key in `$breakpoints`
  @if $value != null {
    // Open a media query block
    @media #{$value} {
      // Let the user dump content
      @content;
    }
  }
  // If `$breakpoint` doesn't exist in `$breakpoints`,
  // Warn the user and do nothing
  @else {
    @warn "Invalid breakpoint `#{$breakpoint}`.";
  }
}

// creates a json out of `$breakpoints`
$mediaJSON: '{';
@each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $value: nth($breakpoint, 2);
    $mediaJSON: $mediaJSON + '"#{$name}":"#{$value}",' !global;
}
$mediaJSON: str-slice( $mediaJSON, 1, str-length($mediaJSON) - 1);
$mediaJSON: $mediaJSON + '}';

// an element with this class will be created with JS in order to parse the JSON content
.js-breakpoint {
  content: "#{$mediaJSON}";
}
{'fraction_non_alphanumeric': 0.17461139896373057, 'fraction_numerical': 0.021761658031088083, 'mean_word_length': 2.919796954314721, 'pattern_counts': {'":': 2, '<': 4, '<?xml version=': 0, '>': 4, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2595460', 'n_tokens_mistral': 1397, 'n_tokens_neox': 1321, 'n_words': 350}