Cacher is the code snippet organizer for pro developers

.el {
  width: 100%; }
  @media (min-width: 960px) {
    .el {
      width: 90%;
      margin-right: auto;
      margin-left: auto; } }

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

$breakpoints: (
  default: null,
  small: 480px,
  large: 960px,
  xl: 1200px,
);

$sizes: ();
// Accoutrement Queries
// ====================

$query-context: ();

$queries: () !default;
$breakpoints: () !default;


// Break [function]
// ----------------

@function break(
  $point
) {
  // Parse arguments
  $point: map-get($breakpoints, $point) or map-get($sizes, $point) or $point;

  // Recursive check
  $point: if(type-of($point) != 'number', break($point), $point);

  // Fix rem units
  @if unit($point) == rem {
    $point: root-size($point);
  }

  @return $point;
}


// Below [mixin]
// -------------

@mixin below(
  $max,
  $prop: width
) {
  @media (max-#{$prop}: #{break($max)}) {
    @content;
  }
}


// Above [mixin]
// -------------

@mixin above(
  $min,
  $prop: width
) {
  @media (min-#{$prop}: #{break($min)}) {
    @content;
  }
}


// Between [mixin]
// ---------------

@mixin between(
  $min,
  $max,
  $prop: width
) {
  @media (min-#{$prop}: #{break($min)}) and (max-#{$prop}: #{break($max)}) {
    @content;
  }
}


// At [mixin]
// ----------

@mixin at(
  $query,
  $no-query: false
) {
  $_old-context: $query-context;
  $_name: if(map-has-key($queries, $query), $query, null);
  $query: _get-query($query);
  $query: _parse-media-query($query);

  @include _update-query-context($query, $_name);

  @include _render-query($query, $no-query) {
    @content;
  }

  @include _update-query-context($_old-context, $clean: true);
}


// At [function]
// -------------

@function at(
  $property: false
) {
  @if $property {
    @return map-get($query-context, $property);
  } @else {
    @return if(length($query-context) > 0, $query-context, false);
  }
}


// Render Query [function]
// -----------------------

@function _render-query(
  $query
) {
  $output: null;
  @each $property, $value in $query {
    $string: null;

    @if $property == media {
      $string: $value;
    } @else {
      $string: '(#{$property}: #{$value})';
    }

    $output: if($output, '#{$output} and #{$string}', $string);
  }

  @return $output;
}


// Render Query [mixin]
// --------------------

@mixin _render-query(
  $query,
  $no-query: false
) {
  @if $no-query and type-of($no-query) != string {
    @content;
  } @else {
    @media #{_render-query($query)} {
      @content;
    }

    @if type-of($no-query) == string {
      #{$no-query} & {
        @content;
      }
    }
  }
}


// Update Query Context
// --------------------

@mixin _update-query-context(
  $query,
  $name: null,
  $clean: false
) {
  $query: if($name, map-merge((name: $name), $query), $query);

  @if $clean {
    $query-context: $query !global;
  } @else {
    $query-context: map-merge($query-context, $query) !global;
  }
}


// Get Query
// ---------

@function _get-query(
  $name
) {
  @if map-has-key($queries, $name) {
    $name: map-get($queries, $name);
    $name: _get-query($name);
  } @else if variable-exists(sizes)
    and function-exists(root-size)
    and map-has-key($sizes, $name) {
    $name: map-get($sizes, $name);
    $name: root-size($name);
  }

  @return $name;
}


// Parse Media
// -----------

@function _parse-media-query(
  $query
) {
  $_mq: null;
  @if type-of($query) == map {
    $_mq: $query;
  } @else if type-of($query) == number {
    $_mq: (min-width: $query);
  } @else if type-of($query) == list and length($query) == 2 {
    $_one: nth($query, 1);
    $_two: nth($query, 2);

    @if type-of($_one) == number {
      @if $_one > $_two {
        $_mq: (
          min-width: $_two,
          max-width: $_one,
        );
      } @else {
        $_mq: (
          min-width: $_one,
          max-width: $_two,
        );
      }
    } @else {
      $_mq: (nth($query, 1): nth($query, 2));
    }
  } @else {
    $_mq: (media: '#{$query}');
  }

  @return $_mq;
}

.el {
  width: 100%;
  
  @include above(large) {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
  }
}