Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$base-font-size: 16;

$viewport-values: (
	\@desk: (1025, 3000, 12),
	\@lap:  (641,  1024, 8),
	\@palm: (320,  640,  4)
) !default;

@function calc-em($values, $context: $base-font-size) {
  $em: ();

  @each $value in $values {

    @if $value == 0 or $value == auto {
      $em: append($em, $value);
    }
    @else {
      $val: $value;
      $em: append($em, ($val / $context * 1em));
    }

  }

  @return $em;
}

@mixin media-query($from: false, $to: false, $and: false) {
  $_from  : 0;
  $_to    : 0;
  $_and   : $and or null;
  $_query : null;

  @if($from) {
    $_from: calc-em($from);
  }

  @if($to) {
    $_to: calc-em($to);
  }

  @if($_from or $_to or $_and) {
    @if ($_from != 0) { $_query: '#{$_query} and (min-width: #{$_from})'; }
    @if ($_to != 0)   { $_query: '#{$_query} and (max-width: #{$_to})';   }
    @if ($_and)       { $_query: '#{$_query} and #{$_and}';               }
  }

  $_query: unquote(#{$_query});

  @media all #{$_query} {
    @content;
  }

}

@mixin widths($widths-columns, $widths-breakpoint: null) {
    @each $widths-denominator in $widths-columns {
        @for $widths-numerator from 1 through $widths-denominator {
            .u-#{$widths-numerator}\/#{$widths-denominator}#{$widths-breakpoint} {
                width: ($widths-numerator / $widths-denominator) * 100% !important;
            }
        }
    }
}

@each $namespace, $viewport-map in $viewport-values {
  @include media-query($from: nth($viewport-map, 1),
                       $to  : nth($viewport-map, 2)) {
    @include widths(nth($viewport-map, 3), $namespace);                       
  }
}




































p {
  background: #ffa;
  padding: 1em;
}

SassMeister-output.css

@media all and (min-width: 64.0625em) and (max-width: 187.5em) {
  .u-1\/12\@desk {
    width: 8.33333% !important;
  }
  .u-2\/12\@desk {
    width: 16.66667% !important;
  }
  .u-3\/12\@desk {
    width: 25% !important;
  }
  .u-4\/12\@desk {
    width: 33.33333% !important;
  }
  .u-5\/12\@desk {
    width: 41.66667% !important;
  }
  .u-6\/12\@desk {
    width: 50% !important;
  }
  .u-7\/12\@desk {
    width: 58.33333% !important;
  }
  .u-8\/12\@desk {
    width: 66.66667% !important;
  }
  .u-9\/12\@desk {
    width: 75% !important;
  }
  .u-10\/12\@desk {
    width: 83.33333% !important;
  }
  .u-11\/12\@desk {
    width: 91.66667% !important;
  }
  .u-12\/12\@desk {
    width: 100% !important;
  }
}

@media all and (min-width: 40.0625em) and (max-width: 64em) {
  .u-1\/8\@lap {
    width: 12.5% !important;
  }
  .u-2\/8\@lap {
    width: 25% !important;
  }
  .u-3\/8\@lap {
    width: 37.5% !important;
  }
  .u-4\/8\@lap {
    width: 50% !important;
  }
  .u-5\/8\@lap {
    width: 62.5% !important;
  }
  .u-6\/8\@lap {
    width: 75% !important;
  }
  .u-7\/8\@lap {
    width: 87.5% !important;
  }
  .u-8\/8\@lap {
    width: 100% !important;
  }
}

@media all and (min-width: 20em) and (max-width: 40em) {
  .u-1\/4\@palm {
    width: 25% !important;
  }
  .u-2\/4\@palm {
    width: 50% !important;
  }
  .u-3\/4\@palm {
    width: 75% !important;
  }
  .u-4\/4\@palm {
    width: 100% !important;
  }
}

p {
  background: #ffa;
  padding: 1em;
}