bootstrap scss 自定义Spacing

在Bootstrap的SCSS版本中，你可以自定义间距（Spacing）来满足你的设计需求。Bootstrap默认提供了一些预设的间距类，但如果需要更细粒度的控制，可以通过以下几个步骤进行定制：

1. **了解基本结构**:
在`bootstrap/scss/utilities/_spacing.scss`中，Bootstrap定义了一组名为`$spacings`的变量，用于存储间距的基数（通常是10px）。你可以修改这些基础值来改变整个间距系统的大小。

2. **覆盖默认值**:
使用`!default`关键字声明的变量是可以被外部引入的，这样你就可以在自定义文件中更改它们。例如：

   $spacings: (
     // 修改默认值
     gutter-x: 16px !default,
     gutter-y: 16px !default,
     spacing: 8px !default
   );

3. **创建新的间距类**:
根据你的需求，基于新的`$spacings`值，可以编写自定义间距类，比如创建一个新的`small-gap`类：

   // 在your-custom-spacing.scss
   @mixin custom-spacing($size) {
     margin: $spacings.spacing / $size;
     padding: $spacings.spacing / ($size + 1);
   }

   .small-gap {
     @include custom-spacing(2); // 生成半倍间距
   }

4. **合并到主题文件**:
将你的自定义间距变量和混合函数合并到你的主题文件（如 `_variables.scss`)，并在需要的地方导入它。

5. **使用自定义类**:
在HTML元素上添加自定义间距类，就像使用Bootstrap原有的间距类一样。

记得在编译完成后，将CSS文件引入到HTML中以应用你的更改。