Update spacer utilities (#22123)

* Drop -x and -y as they're all the same
- Also move -width to elsewhere in the vars because it makes no sense by spacers.
- Update values of -x and -y across main Sass and docs Sass.
* Update docs to reflect changes; link to spacing utils from options page

3 files changed, 11 insertions, 11 deletions

diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
index 28f4cd442..3374aa633 100644
--- a/docs/assets/scss/_content.scss
+++ b/docs/assets/scss/_content.scss
@@ -9,7 +9,7 @@
     display: block;
     width: 100%;
     max-width: 100%;
-    margin-bottom: $spacer;
+    margin-bottom: 1rem;
     overflow-y: auto;
 
     // Cells
diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md
index a1491252e..9638cd4ae 100644
--- a/docs/getting-started/options.md
+++ b/docs/getting-started/options.md
@@ -31,7 +31,7 @@ You can find and customize these variables for key global options in our `_varia
 
 | Variable                    | Values                             | Description                                                                            |
 | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
-| `$spacer`                   | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities.                           |
+| `$spacer`                   | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/utilities/spacing/). |
 | `$enable-rounded`           | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components.                       |
 | `$enable-shadows`           | `true` or `false` (default)        | Enables predefined `box-shadow` styles on various components.                          |
 | `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components.      |
diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md
index 0a5132941..0978e195d 100644
--- a/docs/utilities/spacing.md
+++ b/docs/utilities/spacing.md
@@ -35,11 +35,11 @@ Where *sides* is one of:
 Where *size* is one of:
 
 * `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
-* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .25` or `$spacer-y * .25`
-* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .5` or `$spacer-y * .5`
-* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
-* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
-* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
+* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25` or `$spacer * .25`
+* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5` or `$spacer * .5`
+* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer` or `$spacer`
+* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5` or `$spacer * 1.5`
+* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3` or `$spacer * 3`
 
 (You can add more sizes by adding entries to the `$spacers` Sass map variable.)
 
@@ -53,16 +53,16 @@ Here are some representative examples of these classes:
 }
 
 .ml-1 {
-  margin-left: ($spacer-x * .25) !important;
+  margin-left: ($spacer * .25) !important;
 }
 
 .px-2 {
-  padding-left: ($spacer-x * .5) !important;
-  padding-right: ($spacer-x * .5) !important;
+  padding-left: ($spacer * .5) !important;
+  padding-right: ($spacer * .5) !important;
 }
 
 .p-3 {
-  padding: $spacer-y $spacer-x !important;
+  padding: $spacer $spacer !important;
 }
 {% endhighlight %}