Cacher is the code snippet organizer for pro developers

<div class="grid_container">
   <h1>test</h1>
</div>

h1 {
  color: white;
}

.grid_container {
  position: relative;
  border: 1px solid red;
  background: black;
  height: 200px;
  width: 500px;
}
@media (min-width: 300px) {
  .grid_container {
    border: 1px solid blue;
  }
}

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import sassy-maps
@import breakpoint

$responsive-test-grid: true

$mq-colors: (tiny: (value: blue), small: (value: purple), medium: (value: red), large: (value: yellow))

@mixin mq-helper($mq-size)
    @if $responsive-test-grid
        border: 1px solid map-get(map-get($mq-colors, $mq-size),value)
        
// @mixin responsive-test-grid($mq-color)
    // @if $responsive-test-grid
    // @each $color in (tiny: #4e9bac, small: #248cff, medium: #3b5998, large: #b51c2c)
    // @each $color in (red, blue, green, yellow)
    // $mq-colors: (tiny: #4e9bac, small: #248cff, medium: #3b5998, large: #b51c2c)
    // @if $mq-size == $tiny
    // $map: (key1: value1 // map-get($map, $key) 
        // @each $color in (tiny: #4e9bac, small: #248cff, medium: #3b5998, large: #b51c2c)


$tiny: 300px

h1
    color: white

.grid_container
    position: relative
    border: 1px solid red
    background: black
    height: 200px
    width: 500px
    @include breakpoint($tiny)
        @include mq-helper(tiny)

<div class="grid_container">
   <h1>test</h1>
</div>