Debug messages and support for multiple units

- px-units by default for media queries
- possible to choose between rem, em or px units for media queries
- Custom error messages if configuration variables are used wrong
- Remove configuration from file which allows altering them elsewhere
- Prints the passed value if it's not a number (in case of inherit or numbers with units)
- Better comments

1 files changed, 62 insertions, 52 deletions

diff --git a/scss/rfs.scss b/scss/rfs.scss
index 0987f72..d5d4350 100644
--- a/scss/rfs.scss
+++ b/scss/rfs.scss
@@ -1,70 +1,80 @@
-///////////////////
-// Configuration //
-///////////////////
+// RFS mixin.
+//
+// Automated font-resizing.
+//
+// See https://github.com/MartijnCuppens/rfs.
 
-// Minimum fontsize.
-$rfs_min_fs: 12;
-
-// Breakpoint at where font-size starts decreasing if screen-width is smaller.
-$rfs_breakpoint: 1200;
-
-// Factor of decrease.
-$rfs_factor: 5;
+@mixin rfs($fs) {
+  // If $fs is not a number (like inherit) or $fs has a unit (like 1.5em) or $ is 0, just print the value.
+  @if type-of($fs) != 'number' or not unitless($fs) or $fs == 0 {
+    font-size: #{$fs};
+  } @else {
 
-// Use REM.
-$rfs_use_rem: true;
+    // Minimum fontsize.
+    $rfs_minimum_font_size: 12 !default;
+    $rfs_minimum_font_size_unit: rem !default;
 
+    // Breakpoint at where font-size starts decreasing if screen width is smaller.
+    $rfs_breakpoint: 1200 !default;
+    $rfs_breakpoint_unit: px !default;
 
-///////////
-// Mixin //
-///////////
+    // Factor of decrease.
+    $rfs_factor: 5 !default;
 
-// Make font size responsive.
-@mixin rfs($fs) {
-  @if type-of($fs) != 'number' or not unitless($fs) {
-    @error "#{$fs} is not a number.";
-  }
+    // 1 rem = $rfs_rem_value px.
+    $rfs_rem_value: 16 !default;
 
-  // Set default parameters
-  // Minimum fontsize.
-  $rfs_min_fs: 12 !default;
+    // Default font-size.
+    @if $rfs_minimum_font_size_unit == rem {
+      font-size: #{$fs / $rfs_rem_value}rem;
+    } @else if $rfs_minimum_font_size_unit == px {
+      font-size: #{$fs}px;
+    } @else {
+      @error "`#{$rfs_minimum_font_size_unit}` is not a valid unit for $rfs_minimum_font_size_unit. Use `px` or `rem`.";
+    }
 
-  // Breakpoint at where font-size starts decreasing if screenwidth is smaller.
-  $rfs_breakpoint: 1200 !default;
+    @if $rfs_factor < 1 {
+      @error "`#{$rfs_factor}` is not a valid  $rfs_factor, it must be greater or equal to 1.";
+    }
 
-  // Factor of decrease.
-  $rfs_factor: 5 !default;
+    // Only add media query if font-size is bigger as the minimum font-size.
+    // If $rfs_factor == 1, no rescaling will take place.
+    @if $fs > $rfs_minimum_font_size and $rfs_factor != 1 {
 
-  // Use rem or px
-  $rfs_use_rem: true !default;
+      // These variables must be defined outside of the if-else-construction.
+      // see https://stackoverflow.com/questions/15371332/sass-ignores-variables-defined-in-if-statement.
+      $mq_max_width: null;
+      $min_width: null;
 
-  // 1 rem = $rfs_rem_value px
-  $rfs_rem_value: 16 !default;
+      // Calculate minimum font-size for given font-size.
+      $fs_min: $rfs_minimum_font_size + ($fs - $rfs_minimum_font_size) / $rfs_factor;
 
-  // Default font-size.
-  @if $rfs_use_rem {
-    font-size: #{$fs / $rfs_rem_value}rem;
-  } @else {
-    font-size: #{$fs}px;
-  }
+      // Calculate difference between given font-size and minimum font-size for given font-size.
+      $fs_diff: $fs - $fs_min;
 
-  // Only add media query if font-size is bigger as the minimum font-size.
-  @if $fs > $rfs_min_fs {
+      // RFS breakpoint formatting
+      @if $rfs_breakpoint_unit == em or $rfs_breakpoint_unit == rem{
+        $mq_max_width: #{$rfs_breakpoint / $rfs_rem_value}#{$rfs_breakpoint_unit};
+      } @else if $rfs_breakpoint_unit == px {
+        $mq_max_width: #{$rfs_breakpoint}px;
+      } @else {
+        @error "`#{$rfs_breakpoint_unit}` is not a valid unit for $rfs_breakpoint_unit. Use `px`, `em` or `rem`.";
+      }
 
-    // Calculate minimum font-size for given font-size.
-    $fs_min: $rfs_min_fs + ($fs - $rfs_min_fs) / $rfs_factor;
+      // Minimum font-size formatting
+      // No need to check if the unit is valid, because we did that before
+      @if $rfs_minimum_font_size_unit == rem {
+        $min_width: #{$fs_min / $rfs_rem_value}rem;
+      } @else {
+        $min_width: #{$fs_min}px;
+      }
 
-    // Calculate diffrence between given font-size and minimum font-size for given font-size.
-    $fs_diff: $fs - $fs_min;
+      // Calculate the variable width between 0 and $rfs_breakpoint.
+      $variable_width: #{$fs_diff * 100 / $rfs_breakpoint}vw;
 
-    // The media-query
-    @if $rfs_use_rem {
-      @media (max-width: #{$rfs_breakpoint / $rfs_rem_value}rem) {
-        font-size: calc(#{$fs_min / $rfs_rem_value}rem + #{$fs_diff * 100 / $rfs_breakpoint}vw);
-      }
-    } @else {
-      @media (max-width: #{$rfs_breakpoint}px) {
-        font-size: calc(#{$fs_min}px + #{$fs_diff * 100 / $rfs_breakpoint}vw);
+      // Render the calculated font-size.
+      @media (max-width: #{$mq_max_width}) {
+        font-size: calc(#{$min_width} + #{$variable_width});
       }
     }
   }