Docs: consistent usage of CSS sections

[julien-deramond]

Description

Following #38175, this PR suggests more modifications in the way we display CSS and Sass info globally in our docs:

• Most of the time, I've integrated when not already there a surrounding "CSS" section
• I've systematically used the plural form for the section titles (even if they contained only 1 element):
  • "Sass mixin" → "Sass mixins"
  • "Sass loop" → "Sass loops"
  • "Sass map" → "Sass maps"
• So it means that I also changed the URLs impacted by these modifications
• In order to keep the same spirit of "Sass variables", "Sass mixins", "Sass loops":
  • "Utilities" → "Sass utilities API"
  • "Utilities API" → "Sass utilities API"

To summarize, here's the new structure:

## CSS
### Variables
### Sass variables
### Sass maps
### Sass mixins
### Sass loops
### Sass utilities API

Note
Regardingsite/content/docs/5.3/layout/css-grid.md, I decided to let it as is because the content is really linked to a limitation and doesn't seem to fit our regular CSS section.

Hope I haven't broken too much links in the process 😇

Motivation & Context

Docs headings global consistency around CSS and Sass.

Type of changes

• Refactoring (non-breaking change)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-38219--twbs-bootstrap.netlify.app/

[mdo]

So far so good!

[julien-deramond]

@mdo I've updated this branch by going one step further in this refactoring for consistency. Love to hear your thoughts about it. Re-requesting a review (final this time).
Note: it can wait for the v5.3.0-beta

[mdo]

Loving it, will give another review after alpha 2 ships, but this all looks great so far.

[mdo]

Realizing through this code review that, separately or here, we could perhaps turn this section (heading and paragraph) into an include with an argument lol. Maybe, maybe not.

[julien-deramond]

The idea's great. We would need a shortcode or partial or anything else with two params:

• First part of the sentence (e.g. "Background" or "Object fit")
• The param (the key) used for scss-docs (e.g. "utils-bg-color")

The issue is I don't know how to build it with Hugo. I tried few things but haven't managed to succeed by calling scss-docs and docsref within another shortcode or form a partial.

Would like to call it like this:

{{< sass-utilities-api-section "Background" "utils-bg-color" >}}

And it would contain something like:

### Sass utilities API

{{ firstParam }} utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="{{ secondParam }}" file="scss/_utilities.scss" >}}

Maybe @XhmikosR you'd know how to do it

[julien-deramond]

@mdo Maybe we can do it with a step-by-step approach: merge this PR, and create an issue to track this possible enhancement?

[julien-deramond]

FYI tracked in #38434