!important-support, configuration in px possiblev3.0.0

2 files changed, 57 insertions, 37 deletions

diff --git a/package.json b/package.json
index fb2dd76..ab51e58 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rfs",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "A scss-mixin for responsive font-sizes.",
   "main": "scss/rfs.scss",
   "scripts": {
diff --git a/scss/_rfs.scss b/scss/_rfs.scss
index ae54390..a265e39 100644
--- a/scss/_rfs.scss
+++ b/scss/_rfs.scss
@@ -4,83 +4,103 @@
 //
 // See https://github.com/MartijnCuppens/rfs.
 
-
 // Configuration.
 
 // Minimum fontsize.
-$rfs_minimum_font_size: 12 !default;
-$rfs_minimum_font_size_unit: rem !default;
+$rfs-minimum-font-size: 12px !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;
+$rfs-breakpoint: 1200px !default;
+$rfs-breakpoint-unit: px !default;
 
 // Factor of decrease.
-$rfs_factor: 5 !default;
+$rfs-factor: 5 !default;
 
-// 1 rem = $rfs_rem_value px.
-$rfs_rem_value: 16 !default;
+// 1 rem = $rfs-rem-value px.
+$rfs-rem-value: 16 !default;
 
+// Remove px-unit from $rfs-minimum-font-size for calculations.
+@if (unit($rfs-minimum-font-size) == 'px') {
+  $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1)
+}
+
+// Remove px-unit from $rfs-breakpoint for calculations.
+@if (unit($rfs-breakpoint) == 'px') {
+  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1)
+}
 
 // Responsive font-size mixin.
+@mixin rfs($fs, $important: false) {
+
+  $rfs-suffix: '';
+
+  // Add !important suffix if needed.
+  @if ($important) {
+    $rfs-suffix: ' !important';
+  }
 
-@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};
+  @if type-of($fs) != 'number' or (not unitless($fs) and unit($fs) != 'px') or $fs == 0 {
+    font-size: #{$fs}#{$rfs-suffix};
   } @else {
 
+    // Remove px-unit from $fs for calculations.
+    @if (unit($fs) == 'px') {
+      $fs: $fs / ($fs * 0 + 1)
+    }
+
     // 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;
+    @if $rfs-minimum-font-size-unit == rem {
+      font-size: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
+    } @else if $rfs-minimum-font-size-unit == px {
+      font-size: #{$fs}px#{$rfs-suffix};
     } @else {
-      @error "`#{$rfs_minimum_font_size_unit}` is not a valid unit for $rfs_minimum_font_size_unit. Use `px` or `rem`.";
+      @error "`#{$rfs-minimum-font-size-unit}` is not a valid unit for $rfs-minimum-font-size-unit. Use `px` or `rem`.";
     }
 
-    @if $rfs_factor < 1 {
-      @error "`#{$rfs_factor}` is not a valid  $rfs_factor, it must be greater or equal to 1.";
+    @if $rfs-factor < 1 {
+      @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater or equal to 1.";
     }
 
     // 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 {
+    // If $rfs-factor == 1, no rescaling will take place.
+    @if $fs > $rfs-minimum-font-size and $rfs-factor != 1 {
 
       // 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;
+      $mq-max-width: null;
+      $min-width: null;
 
       // Calculate minimum font-size for given font-size.
-      $fs_min: $rfs_minimum_font_size + ($fs - $rfs_minimum_font_size) / $rfs_factor;
+      $fs-min: $rfs-minimum-font-size + ($fs - $rfs-minimum-font-size) / $rfs-factor;
 
       // Calculate difference between given font-size and minimum font-size for given font-size.
-      $fs_diff: $fs - $fs_min;
+      $fs-diff: $fs - $fs-min;
 
       // 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;
+      @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`.";
+        @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
       }
 
       // 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;
+      @if $rfs-minimum-font-size-unit == rem {
+        $min-width: #{$fs-min / $rfs-rem-value}rem;
       } @else {
-        $min_width: #{$fs_min}px;
+        $min-width: #{$fs-min}px;
       }
 
-      // Calculate the variable width between 0 and $rfs_breakpoint.
-      $variable_width: #{$fs_diff * 100 / $rfs_breakpoint}vw;
+      // Calculate the variable width between 0 and $rfs-breakpoint.
+      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}vw;
 
       // Render the calculated font-size.
-      @media (max-width: #{$mq_max_width}) {
-        font-size: calc(#{$min_width} + #{$variable_width});
+      @media (max-width: #{$mq-max-width}) {
+        font-size: calc(#{$min-width} + #{$variable-width})#{$rfs-suffix};
       }
     }
   }