title: Why isn't (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) a valid CSS value in Sassmeister?
body: <p>I am trying to process the following Sass on <a href="https://www.sassmeister.com/" rel="nofollow noreferrer">https://www.sassmeister.com/</a> but get an error:</p>
  
  <blockquote>
    <p>(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) isn't a valid CSS value.</p>
  </blockquote>
  
  <pre><code>$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
  ) !default;
  $utilities: () !default;
  
  $utilities: map-merge(
    (
      "align": (
        property: vertical-align,
        class: align,
        values: baseline top middle bottom text-bottom text-top
      ),
      "float": (
        responsive: true,
        property: float,
        values: left right none
      )
  ), $utilities);
  
  
  // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
  // Makes the @content apply to the given breakpoint and wider.
  @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);
    @if $min {
      @media (min-width: $min) {
        @content;
      }
    } @else {
      @content;
    }
  }
  
  
  // Loop over each breakpoint
  @each $breakpoint in map-keys($grid-breakpoints) {
  
    // Generate media query if needed
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  
      // Loop over each utility property
      @each $key, $utility in $utilities {
        // The utility can be disabled with `false`, thus check if the utility is a map first
        // Only proceed if responsive media queries are enabled or if it's the base media query
        @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
          @include generate-utility($utility, $infix);
        }
      }
    }
  }
  
  
  // Print utilities
  @media print {
    @each $key, $utility in $utilities {
      // The utility can be disabled with `false`, thus check if the utility is a map first
      // Then check if the utility needs print styles
      @if type-of($utility) == "map" and map-get($utility, print) == true {
        @include generate-utility($utility, "-print");
      }
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/F3Uo3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F3Uo3.png" alt="enter image description here"></a></p>
  
  <p>Any idea of what is wrong here?</p>