Add Sass docs (variables, mixins, and loops) to most pages (#32747)

* WIP: Mention variables, mixins, and loops in docs

* Add Sass sections to component pages

* add sass docs for forms and content

* Update buttons.md

* Remove empty mixins sections

* Massive update to utilities and some consistency changes

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

scss/mixins/_buttons.scss

@@ -3,6 +3,7 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
+// scss-docs-start btn-variant-mixin
 @mixin button-variant(
   $background,
   $border,
@@ -71,7 +72,9 @@
     border-color: $disabled-border;
   }
 }
+// scss-docs-end btn-variant-mixin
 
+// scss-docs-start btn-outline-variant-mixin
 @mixin button-outline-variant(
   $color,
   $color-hover: color-contrast($color),
@@ -118,11 +121,13 @@
     background-color: transparent;
   }
 }
+// scss-docs-end btn-outline-variant-mixin
 
-// Button sizes
+// scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   @include font-size($font-size);
   // Manually declare to provide an override to the browser default
   @include border-radius($border-radius, 0);
 }
+// scss-docs-end btn-size-mixin