Generated by SassMeister.com.

SassMeister-input.scss

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

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

$phi: 1.61803398874; // ~Phi ratio for Fibonacci sequence 
$rphi: 1.1319882487943; // http://en.wikipedia.org/wiki/Random_Fibonacci_sequence    

//     _____         _     _   _         
//    |  |  |___ ___|_|___| |_| |___ ___ 
//    |  |  | .'|  _| | .'| . | | -_|_ -|
//     \___/|__,|_| |_|__,|___|_|___|___|
                                   
// From constants
$constant--line-height:     $phi !default;
$constant--font-scale:      $rphi !default;

// 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;


//     _____     _   _   _             
//    |   __|___| |_| |_|_|___ ___ ___ 
//    |__   | -_|  _|  _| |   | . |_ -|
//    |_____|___|_| |_| |_|_|_|_  |___|
//                            |___|    
    

// MAX COLUMN DIVISIONS
// This value defines how many columns we can have in one grid. 
$column--divisions:         5 !default;

// ANIMATE GRID RESIZING
// When window is resized, 
$animation--grid:           true !default;

// ANIMATE FONT RESIZING
$animation--font:           false !default;

// PADDINGS AND MARGINS
// Element padding adds 1/2 $unit width to left and right .col padding
// Element margin adds 1 $unit height below all .row style variations
$element--padding:          false !default; 
$element--margin:           false !default; 

// EXTENDER
// extend invisible classes (%) : true 
// or use predefined grid classes in CSS : false
$extender:                  false !default;

// MAX STRECH
// Resolutions where grid is strechable to the edges of the screen.
$stretchMobile:             true !default;
$stretchPhablet:            true !default;
$stretchTablet:             true !default;
$stretchDesktop:            false !default;
$stretchDesktop2:           false !default;
$stretchDesktop3:           false !default;

// UNITS
// Do we use REM units with PX fallback (true) or just pixel units (false)
$unit--rem:                 true !default;




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


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


// Test
@print {
 resolution-breakpoints: length($resolutions); 
}


$totalRes: length($resolutions);
@for $i from 1 through $totalRes {
  /* Breakpoint #{$i} - #{map-get(nth($resolutions, $i), name)} */
  
  // First breakpoint doesn't have min-value, so use start of next breakpoint as max value
  @if ($i == 1) {
    @media  (max-width: map-get(nth($resolutions, $i + 1), breakpointStart) - 1px) {
      .test { font-size: map-get(nth($resolutions, $i), baseFontSize); }
    }
  }
  
  // Other breakpoints have min and max values
  // Styles are encapsulated in these resolutions
  @if ($i > 1 and $i < $totalRes) {
    @media  (min-width: map-get(nth($resolutions, $i), breakpointStart)) and 
            (max-width: map-get(nth($resolutions, $i + 1), breakpointStart) - 1px) 
    {
      .test { font-size: map-get(nth($resolutions, $i), baseFontSize); }
    }
  }
  
  // Last breakpoint doesn't have max value
  @if ($i == $totalRes) {
     @media   (min-width: map-get(nth($resolutions, $i), breakpointStart)) {
      .test { font-size: map-get(nth($resolutions, $i), baseFontSize); }
    }
  }
}

SassMeister-output.css

@print {
  resolution-breakpoints: 6;
}

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

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

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

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

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

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