refactor: migrate to Dart Sass and update SCSS structure

dist/_computed-variables.scss

@@ -0,0 +1,53 @@
+@use "sass:list";
+@use "variables";
+
+// the calculations below are all based on the values in variables.
+// They should not be modified.
+// -----------------------------------------------------------------------------
+@use "sass:math";
+
+$g-max-body-width: (variables.$g-column-count * variables.$g-max-column-width) + ((variables.$g-column-count - 1) * variables.$g-max-gutter-width);
+
+$g-column-decimal: math.div(variables.$g-max-column-width, $g-max-body-width);
+$g-gutter-decimal: math.div(variables.$g-max-gutter-width, $g-max-body-width);
+
+$g-column: $g-column-decimal * 100%;
+$g-gutter: $g-gutter-decimal * 100%;
+
+$g-column-template: repeat(variables.$g-column-count, 1fr);
+$g-column-gap: $g-gutter;
+
+// place the 'max-body' and 'base' breakpoints at the correct place inside our
+// $g-breakpoints map, and use the previous breakpoint's inset value
+// to calculate the appropriate target screen size.
+// generates the final breakpoint map between default and user settings
+// -----------------------------------------------------------------------------
+@function generateBreakpoints() {
+  $max-body-inserted: false;
+  $calcSize: 0;
+  $breakpoints: ();
+
+  @each $bp, $bp-width, $bp-inset in variables.$g-user-breakpoints {
+    // now find the correct place to insert the max body breakpoint
+    @if $bp-inset != 'auto' {
+      $calcSize: $g-max-body-width + ($bp-inset * 2);
+
+      @if ($calcSize < $bp-width and $max-body-inserted == false) {
+        $breakpoints: list.append($breakpoints, 'max-body' $calcSize auto);
+        $max-body-inserted: true;
+      }
+    } @else if $max-body-inserted == false {
+      // if we didn't hit a match before we reached 'auto' inset values then use the
+      // latest available values and insert the 'max-body' breakpoint
+      $breakpoints: list.append($breakpoints, 'max-body' $calcSize auto);
+      $max-body-inserted: true;
+    }
+
+    // append the user breakpoint
+    $breakpoints: list.append($breakpoints, $bp $bp-width $bp-inset);
+  }
+
+  @return $breakpoints;
+}
+
+$g-breakpoints: generateBreakpoints();

dist/_functions.scss

@@ -0,0 +1,40 @@
+@use "sass:list";
+@use "sass:string";
+@use "computed-variables";
+
+// function to return a breakpoint value from the breakpoint map
+// -----------------------------------------------------------------------------
+@function bp($bp) {
+  $match: nested-map-get(computed-variables.$g-breakpoints, 1, $bp);
+  @if $match {
+    @return list.nth($match, 2);
+  }
+  // @warn "The breakpoint key '#{$bp}' is not in the map ’$g-breakpoints’";
+  @return null;
+};
+
+// function to get the unit value of a number
+// -----------------------------------------------------------------------------
+@function getUnit($value) {
+  @return string.slice($value * 0 + "", 2, -1);
+}
+
+// function to get a value by index from a nested map
+// -----------------------------------------------------------------------------
+@function nested-map-get($haystack, $target-index, $target-value) {
+  $length: list.length($haystack);
+  $match-found: false;
+  $index: 1;
+
+  @while (($index <= $length) and ($match-found != true)) {
+    $match-found: $target-value == list.nth(list.nth($haystack, $index), $target-index);
+    $index: $index + 1;
+  }
+
+  @if $match-found {
+    @return list.nth($haystack, $index - 1);
+  }
+
+  // @warn "The nested key '#{$target-value}' was not found at index #{$target-index} inside of #{$haystack}.";
+  @return false;
+}