[NO-TICKET] Make Sass syntax compatible with node-sass compiler (#1958)

* Revert Sass updates that are incompatible with `node-sass`

There are still a couple warnings in dart `sass` about the `percentage()` calculations, but it doesn't break the build

* Fix warning that division needs to be used in calc

We can use `calc` (compatible with node-sass) instead of `math.div` (dart sass only) if we convert it to a percentage in a different way

packages/design-system/src/styles/components/_UsaBanner.scss

@@ -1,7 +1,5 @@
 // @TODO: deprecate usage of these when modification of these in
 // consuming systems is either not done or easily resolved
-@use 'sass:math';
-
 $usa-banner-mobile-close-size: 48px;
 $usa-caret-icon-size: 10px;
 $usa-banner-font-family: $font-sans;
@@ -163,7 +161,7 @@ $usa-banner-font-family: $font-sans;
 .ds-c-usa-banner__lock-image {
   height: 1.5ex;
   vertical-align: inherit;
-  width: math.div(1.5ex * 52, 64);
+  width: calc(1.5ex * 52 / 64);
 
   path {
     fill: currentColor;

packages/design-system/src/styles/settings/mixins/_layout.scss

@@ -1,5 +1,3 @@
-@use 'sass:math';
-
 @mixin clearfix {
   &::before {
     content: '';
@@ -14,8 +12,8 @@
 }
 
 @mixin flexbox-col($size) {
-  flex: 0 0 percentage(math.div($size, $grid-columns));
-  max-width: percentage(math.div($size, $grid-columns)); // IE10+ and Firefox
+  flex: 0 0 calc($size / $grid-columns) * 100%;
+  max-width: calc($size / $grid-columns) * 100%; // IE10+ and Firefox
 }
 
 @mixin equal-width-flexbox-col() {

packages/design-system/src/styles/utilities/_grid.scss

@@ -1,5 +1,3 @@
-@use 'sass:math';
-
 @import '../settings/index.scss';
 
 // TODO: Update class namespace to utilities