Add .sass variantv7.0.4

2 files changed, 149 insertions, 1 deletions

diff --git a/package.json b/package.json
index 664a7a7..f41f0ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rfs",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "A scss-mixin for responsive font-sizes.",
   "main": "scss/_rfs.scss",
   "scripts": {
diff --git a/sass/_rfs.sass b/sass/_rfs.sass
new file mode 100644
index 0000000..9c05e49
--- /dev/null
+++ b/sass/_rfs.sass
@@ -0,0 +1,148 @@
+// stylelint-disable declaration-property-value-blacklist
+
+// RFS mixin.
+//
+// Automated font-resizing.
+//
+// See https://github.com/MartijnCuppens/rfs.
+
+// Configuration.
+
+// Minimum fontsize.
+$rfs-minimum-font-size: 1rem !default
+$rfs-font-size-unit: rem !default
+
+// Breakpoint at where font-size starts decreasing if screen width is smaller.
+$rfs-breakpoint: 1200px !default
+$rfs-breakpoint-unit: px !default
+
+// Resize font-size based on screen height and width.
+$rfs-two-dimensional: false !default
+
+// Factor of decrease.
+$rfs-factor: 5 !default
+
+// Generate disable classes
+$rfs-generate-disable-classes: true !default
+
+// 1 rem = $rfs-rem-value px.
+$rfs-rem-value: 16 !default
+
+// Disable RFS by setting $enable-responsive-font-sizes to false.
+$enable-responsive-font-sizes: true !default
+
+@if $enable-responsive-font-sizes == false
+  // If $rfs-factor is set to 1, fluid font-resizing is disabled.
+  $rfs-factor: 1
+
+// 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)
+@else if unit($rfs-minimum-font-size) == "rem"
+  $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1 / $rfs-rem-value)
+
+// Remove unit from $rfs-breakpoint for calculations.
+@if unit($rfs-breakpoint) == "px"
+  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1)
+@else if unit($rfs-breakpoint) == "rem" or unit($rfs-breakpoint) == "em"
+  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value)
+
+// Responsive font-size mixin.
+=rfs($fs, $important: false)
+  $rfs-suffix: ""
+
+  // Add !important suffix if needed.
+  @if $important
+    $rfs-suffix: " !important"
+
+  // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value.
+  @if type-of($fs) != "number" or not unitless($fs) and unit($fs) != "px" and unit($fs) != "rem" or $fs == 0
+    font-size: #{$fs}#{$rfs-suffix}
+  @else
+    // Variables for storing static and fluid rescaling.
+    $rfs-static: null
+    $rfs-fluid: null
+
+    // Remove px-unit from $fs for calculations.
+    @if unit($fs) == "px"
+      $fs: $fs / ($fs * 0 + 1)
+    @else if unit($fs) == "rem"
+      $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value)
+
+    // Set default font-size.
+    @if $rfs-font-size-unit == rem
+      $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}
+    @else if $rfs-font-size-unit == px
+      $rfs-static: #{$fs}px#{$rfs-suffix}
+    @else
+      @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`."
+
+    @if type-of($rfs-factor) != "number" or $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
+      $min-width: null
+      $variable-unit: null
+
+      // Calculate minimum font-size for given font-size.
+      $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
+
+      // Minimum font-size formatting.
+      // No need to check if the unit is valid, because we did that before.
+      @if $rfs-font-size-unit == rem
+        $min-width: #{$fs-min / $rfs-rem-value}rem
+      @else
+        $min-width: #{$fs-min}px
+
+      // If two-dimensional, use smallest of screen width and height.
+      @if $rfs-two-dimensional
+        $variable-unit: vmin
+      @else
+        $variable-unit: vw
+
+      // Calculate the variable width between 0 and $rfs-breakpoint.
+      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit}
+
+      // Set the calculated font-size.
+      $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix}
+
+    // Rendering.
+    @if $rfs-fluid == null
+      // Only render static font-size if no fluid font-size is available.
+      font-size: $rfs-static
+    @else
+      $mq-value: null
+
+      // RFS breakpoint formatting.
+      @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem
+        $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}
+      @else if $rfs-breakpoint-unit == px
+        $mq-value: #{$rfs-breakpoint}px
+      @else
+        @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."
+
+      @if $rfs-generate-disable-classes
+        // Adding an extra class increases specificity,
+        // which prevents the media query to override the font size
+        &,
+        .disable-responsive-font-size &,
+        &.disable-responsive-font-size
+          font-size: $rfs-static
+      @else
+        font-size: $rfs-static
+
+      @if $rfs-two-dimensional
+        @media (max-width: #{$mq-value}), (max-height: #{$mq-value})
+          font-size: $rfs-fluid
+      @else
+        @media (max-width: #{$mq-value})
+          font-size: $rfs-fluid
+
+// The responsive-font-size mixin uses RFS to rescale font sizes.
+=responsive-font-size($fs, $important: false)
+  +rfs($fs, $important)