Ported from import syntax to modules

1 files changed, 46 insertions, 43 deletions

diff --git a/src/_responsive.scss b/src/_responsive.scss
index a3d8445..9520dfc 100644
--- a/src/_responsive.scss
+++ b/src/_responsive.scss
@@ -17,20 +17,23 @@
 /// @access public
 ////
 
+@use './functions';
+@use './contexts';
+
 ///
 /// If true, named viewports will be supported if a compatible $breakpoints map exists.
 /// This is the case for [include-media](https://include-media.com/), for example.
 ///
 /// @type bool
 ///
-$iro-responsive-support-named-viewports: true !default;
+$support-named-viewports: true !default;
 
 ///
 /// Context ID used for responsive environment-related mixins.
 ///
 /// @type string
 ///
-$iro-responsive-context-id: 'responsive' !default;
+$context-id: 'responsive' !default;
 
 /// 
 /// Scale a property uniformly between a specific set of target viewports / values.
@@ -42,7 +45,7 @@ $iro-responsive-context-id: 'responsive' !default;
 ///
 /// @example scss - Responsive font-size between 2 viewports
 ///   .something {
-///     @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px ));
+///     @include property(font-size, ( 320px: 20px, 720px: 30px ));
 ///   }
 ///   
 ///   // Generates:
@@ -67,7 +70,7 @@ $iro-responsive-context-id: 'responsive' !default;
 ///
 /// @example scss - Responsive font-size between 3 viewports
 ///   .something {
-///     @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px ));
+///     @include property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px ));
 ///   }
 ///   
 ///   // Generates:
@@ -96,21 +99,21 @@ $iro-responsive-context-id: 'responsive' !default;
 ///     }
 ///   }
 ///
-@mixin iro-responsive-property($props, $responsive-map, $fluid: true, $vertical: false) {
-    @include iro-responsive-env(map-keys($responsive-map), $fluid, $vertical) {
+@mixin property($props, $responsive-map, $fluid: true, $vertical: false) {
+    @include env(map-keys($responsive-map), $fluid, $vertical) {
         @if type-of($props) == list {
             @each $prop in $props {
-                #{$prop}: iro-responsive-set(map-values($responsive-map));
+                #{$prop}: set(map-values($responsive-map));
             }
         } @else {
-            #{$props}: iro-responsive-set(map-values($responsive-map));
+            #{$props}: set(map-values($responsive-map));
         }
     }
 }
 
 /// 
 /// Create a new responsive environment by specifying a set of viewports.
-/// Inside a responsive environment, use the iro-responsive-set function to make a property scale automatically.
+/// Inside a responsive environment, use the set function to make a property scale automatically.
 ///
 /// @param {list} $viewports        - Viewports sorted in ascending order
 /// @param {bool} $fluid [true]     - If enabled, property values will smoothly transition from one viewport to the next
@@ -118,12 +121,12 @@ $iro-responsive-context-id: 'responsive' !default;
 ///
 /// @content
 ///
-/// @see {function} iro-responsive-set
+/// @see {function} set
 ///
 /// @example scss - Responsive font-size between 2 viewports
 ///   .something {
-///     @include iro-responsive-env((320px, 720px)) {
-///       font-size: iro-responsive-set(20px, 30px);
+///     @include env((320px, 720px)) {
+///       font-size: set(20px, 30px);
 ///     }
 ///   }
 ///   
@@ -147,7 +150,7 @@ $iro-responsive-context-id: 'responsive' !default;
 ///     }
 ///   }
 ///
-@mixin iro-responsive-env($viewports, $fluid: true, $vertical: false) {
+@mixin env($viewports, $fluid: true, $vertical: false) {
     @if length($viewports) <= 1 {
         @error '$viewports must contain at least two viewports.';
     }
@@ -155,7 +158,7 @@ $iro-responsive-context-id: 'responsive' !default;
     $new-viewports: ();
 
     @each $viewport in $viewports {
-        @if $iro-responsive-support-named-viewports and global-variable-exists(breakpoints) {
+        @if $support-named-viewports and global-variable-exists(breakpoints) {
             @if map-has-key($breakpoints, $viewport) {
                 $viewport: map-get($breakpoints, $viewport);
             }
@@ -168,7 +171,7 @@ $iro-responsive-context-id: 'responsive' !default;
         $new-viewports: append($new-viewports, $viewport);
     }
 
-    $viewports: iro-quicksort($new-viewports);
+    $viewports: functions.quicksort($new-viewports);
 
     @if $new-viewports != $viewports {
         @error '$viewports was not sorted in ascending order.';
@@ -178,7 +181,7 @@ $iro-responsive-context-id: 'responsive' !default;
         $first-vp: nth($viewports, 1);
         $last-vp:  nth($viewports, length($viewports));
 
-        @include iro-context-push($iro-responsive-context-id, 'env', (
+        @include contexts.push($context-id, 'env', (
                 'viewports': $viewports,
                 'mode':      set,
                 'index':     1,
@@ -188,7 +191,7 @@ $iro-responsive-context-id: 'responsive' !default;
 
         @content;
 
-        @include iro-context-pop($iro-responsive-context-id);
+        @include contexts.pop($context-id);
 
         @for $i from 1 to length($viewports) {
             $prev-vp: nth($viewports, $i);
@@ -196,7 +199,7 @@ $iro-responsive-context-id: 'responsive' !default;
 
             @if not $vertical {
                 @media (min-width: $prev-vp) and (max-width: $next-vp) {
-                    @include iro-context-push($iro-responsive-context-id, 'env', (
+                    @include contexts.push($context-id, 'env', (
                             'viewports': $viewports,
                             'mode':      transition,
                             'index':     $i,
@@ -206,11 +209,11 @@ $iro-responsive-context-id: 'responsive' !default;
 
                     @content;
 
-                    @include iro-context-pop($iro-responsive-context-id);
+                    @include contexts.pop($context-id);
                 }
             } @else {
                 @media (min-height: $prev-vp) and (max-height: $next-vp) {
-                    @include iro-context-push($iro-responsive-context-id, 'env', (
+                    @include contexts.push($context-id, 'env', (
                             'viewports': $viewports,
                             'mode':      transition,
                             'index':     $i,
@@ -220,14 +223,14 @@ $iro-responsive-context-id: 'responsive' !default;
 
                     @content;
 
-                    @include iro-context-pop($iro-responsive-context-id);
+                    @include contexts.pop($context-id);
                 }
             }
         }
 
         @if not $vertical {
             @media (min-width: $last-vp) {
-                @include iro-context-push($iro-responsive-context-id, 'env', (
+                @include contexts.push($context-id, 'env', (
                         'viewports': $viewports,
                         'mode':      set,
                         'index':     length($viewports),
@@ -237,11 +240,11 @@ $iro-responsive-context-id: 'responsive' !default;
 
                 @content;
 
-                @include iro-context-pop($iro-responsive-context-id);
+                @include contexts.pop($context-id);
             }
         } @else {
             @media (min-height: $last-vp) {
-                @include iro-context-push($iro-responsive-context-id, 'env', (
+                @include contexts.push($context-id, 'env', (
                         'viewports': $viewports,
                         'mode':      set,
                         'index':     length($viewports),
@@ -251,11 +254,11 @@ $iro-responsive-context-id: 'responsive' !default;
 
                 @content;
 
-                @include iro-context-pop($iro-responsive-context-id);
+                @include contexts.pop($context-id);
             }
         }
     } @else {
-        @include iro-context-push($iro-responsive-context-id, 'env', (
+        @include contexts.push($context-id, 'env', (
                 'viewports': $viewports,
                 'mode':      set,
                 'index':     1,
@@ -265,14 +268,14 @@ $iro-responsive-context-id: 'responsive' !default;
 
         @content;
 
-        @include iro-context-pop($iro-responsive-context-id);
+        @include contexts.pop($context-id);
 
         @for $i from 2 through length($viewports) {
             $vp: nth($viewports, $i);
 
             @if not $vertical {
                 @media (min-width: $vp) {
-                    @include iro-context-push($iro-responsive-context-id, 'env', (
+                    @include contexts.push($context-id, 'env', (
                             'viewports': $viewports,
                             'mode':      set,
                             'index':     $i
@@ -280,11 +283,11 @@ $iro-responsive-context-id: 'responsive' !default;
 
                     @content;
 
-                    @include iro-context-pop($iro-responsive-context-id);
+                    @include contexts.pop($context-id);
                 }
             } @else {
                 @media (min-height: $vp) {
-                    @include iro-context-push($iro-responsive-context-id, 'env', (
+                    @include contexts.push($context-id, 'env', (
                             'viewports': $viewports,
                             'mode':      set,
                             'index':     $i
@@ -292,7 +295,7 @@ $iro-responsive-context-id: 'responsive' !default;
 
                     @content;
 
-                    @include iro-context-pop($iro-responsive-context-id);
+                    @include contexts.pop($context-id);
                 }
             }
         }
@@ -306,10 +309,10 @@ $iro-responsive-context-id: 'responsive' !default;
 /// 
 /// @return {number|string}
 ///
-@function iro-responsive-set($values, $without-calc: false) {
-    $noop: iro-context-assert-stack-must-contain($iro-responsive-context-id, 'env');
+@function set($values, $without-calc: false) {
+    $noop: contexts.assert-stack-must-contain($context-id, 'env');
 
-    $data:      nth(iro-context-get($iro-responsive-context-id, 'env'), 2);
+    $data:      nth(contexts.get($context-id, 'env'), 2);
     $viewports: map-get($data, 'viewports');
     $mode:      map-get($data, 'mode');
     $fluid:     map-get($data, 'fluid');
@@ -328,7 +331,7 @@ $iro-responsive-context-id: 'responsive' !default;
         $prev-value: nth($values, $index);
         $next-value: nth($values, $index + 1);
 
-        @return iro-responsive-fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc);
+        @return fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc);
     }
 }
 
@@ -344,7 +347,7 @@ $iro-responsive-context-id: 'responsive' !default;
 ///
 /// @access private
 ///
-@function iro-responsive-fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) {
+@function fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) {
     $value-unit:        unit($min-value);
     $max-value-unit:    unit($max-value);
     $viewport-unit:     unit($min-viewport);
@@ -368,12 +371,12 @@ $iro-responsive-context-id: 'responsive' !default;
     }
 
     @if ($value-unit == rem) and ($viewport-unit == px) {
-        $min-viewport:  iro-px-to-rem($min-viewport);
-        $max-viewport:  iro-px-to-rem($max-viewport);
+        $min-viewport:  functions.px-to-rem($min-viewport);
+        $max-viewport:  functions.px-to-rem($max-viewport);
         $viewport-unit: rem;
     } @else if ($value-unit == px) and ($viewport-unit == rem) {
-        $min-value:  iro-px-to-rem($min-value);
-        $max-value:  iro-px-to-rem($max-value);
+        $min-value:  functions.px-to-rem($min-value);
+        $max-value:  functions.px-to-rem($max-value);
         $value-unit: rem;
     }
 
@@ -381,8 +384,8 @@ $iro-responsive-context-id: 'responsive' !default;
         @error 'This combination of units is not supported.';
     }
 
-    $value-diff:    iro-strip-unit($max-value - $min-value);
-    $viewport-diff: iro-strip-unit($max-viewport - $min-viewport);
+    $value-diff:    functions.strip-unit($max-value - $min-value);
+    $viewport-diff: functions.strip-unit($max-viewport - $min-viewport);
 
     $calc: '';
 
@@ -403,4 +406,4 @@ $iro-responsive-context-id: 'responsive' !default;
     }
 }
 
-@include iro-context-stack-create($iro-responsive-context-id);
+@include contexts.create($context-id);