style: Use single-line // comments in Sass (#2602)

Multi-line `/* ... */` comments get emitted verbatim in the CSS output,
whereas single-line `//` comments do not.

To test, run `npm run build` and compare
`build/material-components-web.css` against the same file generated by
`master`.

You'll notice a bunch of seemingly random orphaned CSS comments are no
longer emitted.

packages/mdc-drawer/_mixins.scss

@@ -32,15 +32,15 @@
     padding: 16px;
     border-bottom: 1px solid rgba(0, 0, 0, .12);
 
-    /* TODO(sgomes): replace with global breakpoints when we have them */
+    // TODO(sgomes): replace with global breakpoints when we have them
     @media (min-width: 600px) {
       height: 64px;
     }
   }
 }
 
 @mixin mdc-drawer-header_() {
-  /* Use aspect ratio trick to maintain 16:9 aspect ratio on the header */
+  // Use aspect ratio trick to maintain 16:9 aspect ratio on the header
   // styline things header is a type
   // stylelint-disable selector-max-type
   .mdc-drawer__header {

packages/mdc-drawer/temporary/mdc-temporary-drawer.scss

@@ -39,7 +39,7 @@
   contain: strict;
   z-index: 5;
 
-  /* Shaded background */
+  // Shaded background
   &::before {
     display: block;
     position: absolute;
@@ -68,7 +68,7 @@
     overflow: hidden;
     touch-action: none;
 
-    /* TODO(sgomes): replace with global breakpoints when we have them */
+    // TODO(sgomes): replace with global breakpoints when we have them
     @media (min-width: 600px) {
       width: calc(100% - 64px);
       max-width: 320px;

packages/mdc-elevation/_mixins.scss

@@ -17,12 +17,10 @@
 @import "@material/theme/variables";
 @import "./variables";
 
-/**
- * Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
- * The $z-value must be between 0 and 24.
- * If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
- * $opacity-boost.
- */
+// Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
+// The $z-value must be between 0 and 24.
+// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
+// $opacity-boost.
 @mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0) {
   @if type-of($z-value) != number or not unitless($z-value) {
     @error "$z-value must be a unitless number, but received '#{$z-value}'";
@@ -54,18 +52,16 @@
     #{$ambient-z-value} $ambient-color;
 }
 
-/**
- * Returns a string that can be used as the value for a `transition` property for elevation.
- * Calling this function directly is useful in situations where a component needs to transition
- * more than one property.
- *
- * ```scss
- * .foo {
- *   transition: mdc-elevation-transition-value(), opacity 100ms ease;
- *   will-change: $mdc-elevation-property, opacity;
- * }
- * ```
- */
+// Returns a string that can be used as the value for a `transition` property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// ```scss
+// .foo {
+//   transition: mdc-elevation-transition-value(), opacity 100ms ease;
+//   will-change: $mdc-elevation-property, opacity;
+// }
+// ```
 @function mdc-elevation-transition-value(
   $duration: $mdc-elevation-transition-duration,
   $easing: $mdc-elevation-transition-timing-function) {

packages/mdc-elevation/_variables.scss

@@ -105,19 +105,13 @@ $mdc-elevation-ambient-map: (
   24: "0px 9px 46px 8px"
 );
 
-/**
- * The css property used for elevation. In most cases this should not be changed. It is exposed
- * as a variable for abstraction / easy use when needing to reference the property directly, for
- * example in a `will-change` rule.
- */
+// The css property used for elevation. In most cases this should not be changed. It is exposed
+// as a variable for abstraction / easy use when needing to reference the property directly, for
+// example in a `will-change` rule.
 $mdc-elevation-property: box-shadow !default;
 
-/**
- * The default duration value for elevation transitions.
- */
+// The default duration value for elevation transitions.
 $mdc-elevation-transition-duration: 280ms !default;
 
-/**
- * The default easing value for elevation transitions.
- */
+// The default easing value for elevation transitions.
 $mdc-elevation-transition-timing-function: $mdc-animation-standard-curve-timing-function !default;

packages/mdc-form-field/mdc-form-field.scss

@@ -20,7 +20,7 @@
 
 $mdc-form-field-item-spacing: 4px;
 
-/* stylelint-disable selector-max-type */
+// stylelint-disable selector-max-type
 .mdc-form-field {
   @include mdc-typography(body2);
   @include mdc-theme-prop(color, text-primary-on-background);
@@ -57,4 +57,4 @@ $mdc-form-field-item-spacing: 4px;
     }
   }
 }
-/* stylelint-enable selector-max-type */
+// stylelint-enable selector-max-type

packages/mdc-icon-toggle/mdc-icon-toggle.scss

@@ -14,7 +14,7 @@
 // limitations under the License.
 //
 
-/** postcss-bem-linter: define icon-toggle */
+// postcss-bem-linter: define icon-toggle
 
 @import "@material/animation/functions";
 @import "@material/ripple/common";
@@ -60,4 +60,4 @@
   pointer-events: none;
 }
 
-/** postcss-bem-linter: end */
+// postcss-bem-linter: end