ResponsiveFonts

ResponsiveFonts.scss

// SCSS Mixin v.1.0 - beta
// =========================================
// ResponsiveFonts 
// =========================================
// Config
$base-width:960 !default;  // Width @ 100% layout or 1:1
$min-width:320  !default;  // Minimum width
$max-width:2560 !default;  // Maximum width

// only run once
$ResponsiveFonts-init:false !default;          
@mixin ResponsiveFonts($args...){
  @if($ResponsiveFonts-init==false){
    $ResponsiveFonts-init:true;

    // loop start counter
    $s:floor($min-width*100/$base-width);      
 
    // loop end counter 
    $e:ceil($max-width*100/$base-width);       

    // ratio (pixel in percent of base-width)
    $r:$base-width/100;            
            
   // list to hold passed selectors
    $l:();                                  
    @for $i from 1 through length($args){
      $l:append($l,unquote(nth($args,$i)),comma);  
    }
    $l:if(length($l)==0,unquote('.responsive-font-size'),$l);

    @for $i from $s through $e {
      // font-size percentage 
      $p:percentage($i/$base-width)*$r;        

      // media query type min/max
      $t:if($i==$s,max,min);      

      // media query width             
      $w:round(if($i==$s,($r*$i)+($r - 1)*1px+$r*1px,$r*$i*1px)); 

      // build media query
      @media (#{$t}-width:$w){                 
        #{$l}{ font-size:$p;}                  
      }
    }
  }
}

// Include examples 
// Note! only the first will work  
@include ResponsiveFonts();      // default 
@include ResponsiveFonts(html);  // Scale all em, rem and %
@include ResponsiveFonts(body);  // Scale all em and % (rems are relative to body)
@include ResponsiveFonts('.rfs');// I'm lazy don't want .responsive-font-size
@include ResponsiveFonts('.foo','.bar'); // Other selectors just add