Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

/** 
experiment: responsive (framework) all teh things

Usage
<div class="arrange" data-responsive-medium="block width red">test</div>

*/

$breakpoints: (
  small: 480px,
  medium: 1024px
);

$responsive-utilities: (
  block: (
    rule: 'display',
    value: 'block'
  ),
  hidden: (
    rule: 'display',
    value: 'none'
  ),
  width: (
    rule: 'width',
    value: 'auto'
  ),
  red: (
    rule: 'background-color',
    value: 'red'
  ),
);

$breakpoint-utilities: (
  small: (
    block, hidden, width,
  ),
  medium: (
    block, hidden, width, red
  )
);

@each $breakpoint, $utilities in $breakpoint-utilities {
  $size: map-get($breakpoints, $breakpoint);
  @if ($size) {
    @media (max-width: $size) {
      @each $utility in $utilities {
        $utility-styles: map-get($responsive-utilities, $utility);
        @if ($utility-styles) {
          [data-responsive-#{$breakpoint}~="#{$utility}"] {
            #{map-get($utility-styles, rule)}: #{map-get($utility-styles, value)};
          }
        }
      }
    }
  }
}

SassMeister-output.css

/** 
experiment: responsive (framework) all teh things

Usage
<div class="arrange" data-responsive-medium="block width red">test</div>

*/
@media (max-width: 480px) {
  [data-responsive-small~="block"] {
    display: block;
  }

  [data-responsive-small~="hidden"] {
    display: none;
  }

  [data-responsive-small~="width"] {
    width: auto;
  }
}
@media (max-width: 1024px) {
  [data-responsive-medium~="block"] {
    display: block;
  }

  [data-responsive-medium~="hidden"] {
    display: none;
  }

  [data-responsive-medium~="width"] {
    width: auto;
  }

  [data-responsive-medium~="red"] {
    background-color: red;
  }
}