FlowType Sass Mixin

README.md

@@ -108,8 +108,32 @@ $('body').flowtype({
 });
 ```
 
+## FlowType Sass Mixin ##
+
+FlowType is also available as a Sass Mixin. The mixin provides the FlowType functionality using only CSS.
+
+To use the mixin, include the FlowType.scss file into your project and compile using your preferred Sass compiler. You may want to tweak the default settings found in the FlowType.scss file:
+
+```scss
+$minimum: 500;
+$maximum: 1200;
+$minFont: 12;
+$maxFont: 40;
+$fontRatio: 30;
+```
+
+Then, simply `@include` the mixin into your project:
+
+```scss
+body {
+  @include flowtype($minimum, $maximum, $minFont, $maxFont, $fontRatio);
+}
+```
+
+The mixin will apply all necessary media queries to enable the FlowType functionality.
+
 ## Brought to you by... ##
 
 This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus).
 
-FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission.
+FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission.

flowtype.scss

@@ -0,0 +1,50 @@
+/*
+* FlowType Sass Mixin 1.1
+*/
+
+// Establish default settings/variables
+// ====================================
+$minimum: 500;
+$maximum: 1200;
+$minFont: 12;
+$maxFont: 40;
+$fontRatio: 30;
+
+// Mixin start
+// ===========
+@mixin flowtype($maximum, $minimum, $maxFont, $minFont, $fontRatio) {
+  $fontSize: $maxFont;
+  $tempFontSize: $fontSize;
+
+// Output media query for minimum size
+// ===================================
+  @media screen and (max-width: #{$minimum}px) {
+    font-size: #{$minFont}px;
+  }
+
+// Do the magic math
+// =================
+  @for $i from $minimum through $maximum {
+    $fontBase: floor($i / $fontRatio);
+
+    @if $fontBase > $maxFont {
+      $fontSize: $maxFont;  
+    }
+    @else if $fontBase < $minFont {
+      $fontSize: $minFont;
+    }
+    @else {
+      $fontSize: $fontBase;
+    }
+
+// Output media queries
+// ====================      
+    @if $tempFontSize != $fontSize {
+      @media screen and (min-width: #{$i}px) {
+        font-size: #{$fontSize}px;
+      }
+    }
+
+    $tempFontSize: $fontSize;
+  }
+}