Sass docs updates (#37897)

* Add maps

* Redesign scss-docs rendering

* Update other CSS sections

* Fix linter

site/content/docs/5.3/forms/checks-radios.md

@@ -300,9 +300,9 @@ Different variants of `.btn`, such at the various outlined styles, are supported
 <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 Variables for checks:
 

site/content/docs/5.3/forms/input-group.md

@@ -312,8 +312,8 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}

site/content/docs/5.3/forms/overview.md

@@ -105,11 +105,11 @@ If none of these are present, assistive technologies may resort to using the `pl
 
 While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
 
-## Sass
+## CSS
 
 Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables.
 
-### Variables
+### Sass variables
 
 `$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.
 

site/content/docs/5.3/forms/range.md

@@ -42,8 +42,8 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}

site/content/docs/5.3/forms/select.md

@@ -74,8 +74,8 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
 </select>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}

site/content/docs/5.3/forms/validation.md

@@ -349,19 +349,19 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 </form>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
 
 {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
 
 {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
 
-### Map
+### Sass map
 
 This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
 
@@ -369,7 +369,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this
 
 Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
 
-### Loop
+### Sass loop
 
 Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.