Generated by SassMeister.com.

SassMeister-input.scss

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

//     _____         _     _   _         
//    |  |  |___ ___|_|___| |_| |___ ___ 
//    |  |  | .'|  _| | .'| . | | -_|_ -|
//     \___/|__,|_| |_|__,|___|_|___|___|
                                  

// BASE FONT SIZE
$base-font-size--mobile:    12px !default;  
$base-font-size--phablet:   13px !default;
$base-font-size--tablet:    14px !default;
$base-font-size--desktop:   15px !default;
$base-font-size--desktop2:  16px !default;
$base-font-size--desktop3:  18px !default;

// RESOLUTION BREAKPOINTS
$resolution--mobile:        320px !default;
$resolution--phablet:       480px !default;
$resolution--tablet:        768px !default;
$resolution--desktop:       1024px !default;
$resolution--desktop2:      1280px !default;    
$resolution--desktop3:      1440px !default;

//    Resolution
//     _____                 
//    |  _  |___ ___ ___ _ _ 
//    |     |  _|  _| .'| | |
//    |__|__|_| |_| |__,|_  |
//                      |___|
//
//    All variables are packed into this array


$resolutions: (
    mobile: (
        name:               "mobile",
        shortName:          "m",
        baseFontSize:       $base-font-size--mobile,
        breakpointStart:    $resolution--mobile,
    ),
    phablet: (
        name:               "phablet",
        shortName:          "p",
        baseFontSize:       $base-font-size--phablet,
        breakpointStart:    $resolution--phablet,
    ),
    tablet: (
        name:               "tablet",
        shortName:          "t",
        baseFontSize:       $base-font-size--tablet,
        breakpointStart:    $resolution--tablet,
    ),
    desktop: (
        name:               "desktop",
        shortName:          "d",
        baseFontSize:       $base-font-size--desktop,
        breakpointStart:    $resolution--desktop,
    ),
    desktop2: (
        name:               "desktop2",
        shortName:          "d2",
        baseFontSize:       $base-font-size--desktop2,
        breakpointStart:    $resolution--desktop2,
    ),
    desktop3: (
        name:               "desktop3",
        shortName:          "d2",
        baseFontSize:       $base-font-size--desktop3,
        breakpointStart:    $resolution--desktop3,
    )
);


// Test
@for $i from 1 through length($resolutions) {
  // Values extracted from map
  $resolution: nth(map-values($resolutions), $i); // Resolution map
  $breakpointName: map-get($resolution, name);
  $baseFontSize: map-get($resolution, baseFontSize);
  $breakpointStart: map-get($resolution, breakpointStart);
  
  /* Breakpoint #{$i} - #{$breakpointName} */
  
  // First breakpoint doesn't have min-value, so use start of next breakpoint as max value
  @if ($i == 1) {
    $nextResolution: nth(map-values($resolutions), $i+1); 
    $breakpointEnd: map-get($nextResolution, breakpointStart) - 1px;
  
    @media  (max-width: $breakpointEnd) {
      body { font-size: $baseFontSize; }
    }
  }
  
  // Breakpoints in between have min and max values
  // Styles are encapsulated in these resolutions
  @if ($i > 1 and $i < length($resolutions)) {
    $nextResolution: nth(map-values($resolutions), $i+1); 
    $breakpointEnd: map-get($nextResolution, breakpointStart) - 1px;

    @media (min-width: $breakpointStart) and (max-width: $breakpointEnd) {
      body { 
         font-size: $baseFontSize;
      }
    }
  }
  
  // Last breakpoint doesn't have max value
  @if ($i == length($resolutions)) {
    @media (min-width: $breakpointStart) {
      body { 
         font-size: $baseFontSize;
      }
    }
  }
  
}

SassMeister-output.css

/* Breakpoint 1 - mobile */
@media (max-width: 479px) {
  body {
    font-size: 12px;
  }
}

/* Breakpoint 2 - phablet */
@media (min-width: 480px) and (max-width: 767px) {
  body {
    font-size: 13px;
  }
}

/* Breakpoint 3 - tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 14px;
  }
}

/* Breakpoint 4 - desktop */
@media (min-width: 1024px) and (max-width: 1279px) {
  body {
    font-size: 15px;
  }
}

/* Breakpoint 5 - desktop2 */
@media (min-width: 1280px) and (max-width: 1439px) {
  body {
    font-size: 16px;
  }
}

/* Breakpoint 6 - desktop3 */
@media (min-width: 1440px) {
  body {
    font-size: 18px;
  }
}