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/_utilities.scss

@@ -1,14 +1,19 @@
+// stylelint-disable indentation
+
 // Utilities
 
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map-merge(
   (
+    // scss-docs-start utils-vertical-align
     "align": (
       property: vertical-align,
       class: align,
       values: baseline top middle bottom text-bottom text-top
     ),
+    // scss-docs-end utils-vertical-align
+    // scss-docs-start utils-float
     "float": (
       responsive: true,
       property: float,
@@ -18,10 +23,13 @@ $utilities: map-merge(
         none: none,
       )
     ),
+    // scss-docs-end utils-float
+    // scss-docs-start utils-overflow
     "overflow": (
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (
       responsive: true,
@@ -31,6 +39,7 @@ $utilities: map-merge(
       values: inline inline-block block grid table table-row table-cell flex inline-flex none
     ),
     // scss-docs-end utils-display
+    // scss-docs-start utils-shadow
     "shadow": (
       property: box-shadow,
       class: shadow,
@@ -41,6 +50,8 @@ $utilities: map-merge(
         none: none,
       )
     ),
+    // scss-docs-end utils-shadow
+    // scss-docs-start utils-position
     "position": (
       property: position,
       values: static relative absolute fixed sticky
@@ -72,6 +83,8 @@ $utilities: map-merge(
         y: translateY(-50%),
       )
     ),
+    // scss-docs-end utils-position
+    // scss-docs-start utils-borders
     "border": (
       property: border,
       values: (
@@ -119,7 +132,9 @@ $utilities: map-merge(
       class: border,
       values: $border-widths
     ),
+    // scss-docs-end utils-borders
     // Sizing utilities
+    // scss-docs-start utils-sizing
     "width": (
       property: width,
       class: w,
@@ -172,7 +187,9 @@ $utilities: map-merge(
       class: min-vh,
       values: (100: 100vh)
     ),
+    // scss-docs-end utils-sizing
     // Flex utilities
+    // scss-docs-start utils-flex
     "flex": (
       responsive: true,
       property: flex,
@@ -275,7 +292,9 @@ $utilities: map-merge(
         last: 6,
       ),
     ),
+    // scss-docs-end utils-flex
     // Margin utilities
+    // scss-docs-start utils-spacing
     "margin": (
       responsive: true,
       property: margin,
@@ -404,7 +423,14 @@ $utilities: map-merge(
       class: ps,
       values: $spacers
     ),
+    // scss-docs-end utils-spacing
     // Text
+    // scss-docs-start utils-text
+    "font-family": (
+      property: font-family,
+      class: font,
+      values: (monospace: var(--#{$variable-prefix}font-monospace))
+    ),
     "font-size": (
       rfs: true,
       property: font-size,
@@ -427,10 +453,15 @@ $utilities: map-merge(
         bolder: $font-weight-bolder
       )
     ),
-    "text-transform": (
-      property: text-transform,
-      class: text,
-      values: lowercase uppercase capitalize
+    "line-height": (
+      property: line-height,
+      class: lh,
+      values: (
+        1: 1,
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+      )
     ),
     "text-align": (
       responsive: true,
@@ -442,6 +473,30 @@ $utilities: map-merge(
         center: center,
       )
     ),
+    "text-decoration": (
+      property: text-decoration,
+      values: none underline line-through
+    ),
+    "text-transform": (
+      property: text-transform,
+      class: text,
+      values: lowercase uppercase capitalize
+    ),
+    "white-space": (
+      property: white-space,
+      class: text,
+      values: (
+        wrap: normal,
+        nowrap: nowrap,
+      )
+    ),
+    "word-wrap": (
+      property: word-wrap word-break,
+      class: text,
+      values: (break: break-word),
+      rtl: false
+    ),
+    // scss-docs-end utils-text
     // scss-docs-start utils-color
     "color": (
       property: color,
@@ -459,16 +514,6 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-color
-    "line-height": (
-      property: line-height,
-      class: lh,
-      values: (
-        1: 1,
-        sm: $line-height-sm,
-        base: $line-height-base,
-        lg: $line-height-lg,
-      )
-    ),
     // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,
@@ -488,29 +533,7 @@ $utilities: map-merge(
       class: bg,
       values: (gradient: var(--#{$variable-prefix}gradient))
     ),
-    "white-space": (
-      property: white-space,
-      class: text,
-      values: (
-        wrap: normal,
-        nowrap: nowrap,
-      )
-    ),
-    "text-decoration": (
-      property: text-decoration,
-      values: none underline line-through
-    ),
-    "word-wrap": (
-      property: word-wrap word-break,
-      class: text,
-      values: (break: break-word),
-      rtl: false
-    ),
-    "font-family": (
-      property: font-family,
-      class: font,
-      values: (monospace: var(--#{$variable-prefix}font-monospace))
-    ),
+    // scss-docs-start utils-interaction
     "user-select": (
       property: user-select,
       values: all auto none
@@ -520,6 +543,8 @@ $utilities: map-merge(
       class: pe,
       values: none auto,
     ),
+    // scss-docs-end utils-interaction
+    // scss-docs-start utils-border-radius
     "rounded": (
       property: border-radius,
       class: rounded,
@@ -553,6 +578,8 @@ $utilities: map-merge(
       class: rounded-start,
       values: (null: $border-radius)
     ),
+    // scss-docs-end utils-border-radius
+    // scss-docs-start utils-visibility
     "visibility": (
       property: visibility,
       class: null,
@@ -561,6 +588,7 @@ $utilities: map-merge(
         invisible: hidden,
       )
     )
+    // scss-docs-end utils-visibility
   ),
   $utilities
 );