Fix font-face $dir error | Update description comments to SASS synthax

assets/styles/elements/_document.scss

@@ -10,14 +10,14 @@
 // 3. Set the default `font-size` and `line-height` for the entire project,
 //    sourced from our default variables.
 
-@include font-faces($font-faces, $font-dir); /* [1] */
+@include font-faces($font-faces, $font-dir); // [1]
 
 html {
-    min-height: 100%; /* [2] */
+    min-height: 100%; // [2]
     line-height: $line-height;
     font-family: ff("sans");
     color: $color;
-    line-height: $line-height; /* [3] */
+    line-height: $line-height; // [3]
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
@@ -34,7 +34,7 @@ html {
     }
 
     @media (min-width: $from-large) and (max-width: $to-huge) {
-        font-size: $font-size; /* [1] */
+        font-size: $font-size; // [1]
     }
 
     @media (min-width: $from-huge) and (max-width: $to-gigantic) {

assets/styles/generic/_button.scss

@@ -16,20 +16,20 @@ button,
         text-decoration: none;
     }
 
-    display: inline-block; /* [1] */
-    overflow: visible; /* [2] */
-    margin: 0; /* [3] */
+    display: inline-block; // [1]
+    overflow: visible; // [2]
+    margin: 0; // [3]
     padding: 0;
     outline: 0;
     border: 0;
     background: none transparent;
     color: inherit;
-    vertical-align: middle; /* [4] */
-    text-align: center; /* [3] */
+    vertical-align: middle; // [4]
+    text-align: center; // [3]
     text-decoration: none;
     text-transform: none;
-    font: inherit; /* [5] */
+    font: inherit; // [5]
     line-height: normal;
-    cursor: pointer; /* [6] */
+    cursor: pointer; // [6]
     user-select: none;
 }

assets/styles/generic/_generic.scss

@@ -10,7 +10,7 @@ html {
 // Add the correct display in IE 10-.
 // 1. Add the correct display in IE.
 //
-template, /* [1] */
+template, // [1]
 [hidden] {
     display: none;
 }
@@ -66,7 +66,7 @@ h1, h2, h3, h4, h5, h6 {
  * 1. Single taps should be dispatched immediately on clickable elements
  */
 a, area, button, input, label, select, textarea, [tabindex] {
-    -ms-touch-action: manipulation; /* [1] */
+    -ms-touch-action: manipulation; // [1]
     touch-action: manipulation;
 }
 

assets/styles/generic/_media.scss

@@ -13,7 +13,7 @@ iframe,
 img,
 svg,
 video {
-    vertical-align: middle; /* [1] */
+    vertical-align: middle; // [1]
 }
 
 //
@@ -29,16 +29,16 @@ audio:not([controls]) {
 //
 img,
 svg {
-    max-width: 100%; /* [2] */
+    max-width: 100%; // [2]
     height: auto;
 
     //
     // 4. If a `width` and/or `height` attribute have been explicitly defined, let’s
     //    not make the image fluid.
     //
-    &[width], /* [4] */
+    &[width], // [4]
     &[height] {
-        /* [4] */
+        // [4]
         max-width: none;
     }
 }
@@ -47,12 +47,12 @@ svg {
 // 4. Offset `alt` text from surrounding copy.
 //
 img {
-    font-style: italic; /* [4] */
+    font-style: italic; // [4]
 }
 
 //
 // 5. SVG elements should fallback to their surrounding text color.
 //
 svg {
-    fill: currentColor; /* [5] */
+    fill: currentColor; // [5]
 }

assets/styles/objects/_crop.scss

@@ -21,9 +21,9 @@ $crop-ratios: (
  * 2. This is the crucial part: where the cropping happens.
  */
 .o-crop {
-    position: relative; /* [1] */
+    position: relative; // [1]
     display: block;
-    overflow: hidden; /* [2] */
+    overflow: hidden; // [2]
 }
 
 /**
@@ -34,9 +34,9 @@ $crop-ratios: (
  */
 .o-crop_content {
     position: absolute;
-    top: 0; /* [1] */
-    left: 0; /* [1] */
-    max-width: none; /* [2] */
+    top: 0; // [1]
+    left: 0; // [1]
+    max-width: none; // [2]
 
     /**
      * We can position the media in different locations within the cropping area.

assets/styles/objects/_ratio.scss

@@ -17,7 +17,7 @@
 
     &:before {
         display: block;
-        padding-bottom: 100%; /* [1] */
+        padding-bottom: 100%; // [1]
         width: 100%;
         content: "";
     }

assets/styles/tools/_fonts.scss

@@ -29,7 +29,7 @@
 //
 @mixin font-faces($webfonts, $dir) {
     @each $webfont in $webfonts {
-        @include font-face($webfont, $dit);
+        @include font-face($webfont, $dir);
     }
 }
 

assets/styles/utilities/_print.scss

@@ -21,7 +21,7 @@
     *:first-line {
         background: transparent !important;
         box-shadow: none !important;
-        color: #000000 !important; /* [1] */
+        color: #000000 !important; // [1]
         text-shadow: none !important;
     }