Merge pull request #812 from ember-learn/jw-cm-sass-format

Update SCSS division syntax

Author: jenweber

app/styles/base/_forms.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 fieldset {
   background-color: lighten($base-border-color, 10%);
   border: $base-border;
@@ -28,7 +30,7 @@ select {
 
 label {
   font-weight: 600;
-  margin-bottom: $small-spacing / 2;
+  margin-bottom: math.div($small-spacing, 2);
 
   &.required::after {
     content: "*";
@@ -48,8 +50,8 @@ textarea {
   box-sizing: border-box;
   font-family: $base-font-family;
   font-size: $base-font-size;
-  margin-bottom: $base-spacing / 2;
-  padding: $base-spacing / 3;
+  margin-bottom: math.div($base-spacing, 2);
+  padding: math.div($base-spacing, 3);
   transition: border-color;
   width: 100%;
 
@@ -72,7 +74,7 @@ textarea {
 input[type="checkbox"],
 input[type="radio"] {
   display: inline;
-  margin-right: $small-spacing / 2;
+  margin-right: math.div($small-spacing, 2);
 }
 
 input[type="file"] {

app/styles/base/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Typography
 $base-font-family: 'Source Sans Pro', sans-serif;
 $heading-font-family: $base-font-family;
@@ -15,7 +17,7 @@ $heading-line-height: 1.2;
 
 // Spacing
 $base-spacing: $base-line-height * 1em;
-$small-spacing: $base-spacing / 2;
+$small-spacing: math.div($base-spacing, 2);
 $large-spacing: $base-spacing * 2;
 $top-spacing: $base-spacing * 3.333; // 80px