bootstrap scss/_utilities.scss 不直接修改原文件添加一个新的宽度比例 详细案例

Bootstrap 的 SCSS 文件 `_utilities.scss` 是一个包含各种 CSS 实用工具和混合设置的文件，主要用于提供简洁易用的样式。如果你想在不直接修改源文件的情况下添加新的宽度比例，你可以创建自定义的 SCSS 模块，并在需要的地方导入它。

以下是创建一个新宽度比例并避免污染主文件的一个详细案例：

1. **创建新SCSS模块**:
- 首先，在你的项目目录下创建一个名为 `custom/_variables.scss` 或者你觉得合适的新文件，用于存放自定义变量。

   // custom/_variables.scss
   $new-width-ratio: (4 / 16) * 100%;
   
   // 定义一个新的宽度单位，比如 'custom-width'
   @mixin new-custom-width($width-value) {
     width: $width-value;
   }

2. **导入到需要使用的组件或布局中**:
- 在你的 CSS 文件或组件的 SCSS 文件里，导入这个自定义变量文件。

   // _your-component.scss 或 main.scss
   @import 'custom/_variables';

   .your-class {
     @include new-custom-width($new-width-ratio);
   }

现在，`.your-class` 将应用你定义的新宽度比例。

3. **编译CSS**:
使用 SCSS 编译器（如 Node.js 的 `node-sass` 或 Webpack 的 `sass-loader`）将 SCSS 转换为 CSS 并引入到你的前端应用中。

这样做可以保持项目的组织性和复用性，同时防止了对Bootstrap原始 `_utilities.scss` 文件的直接修改，如果日后想移除这个定制，只需要删除自定义的 SCSS 文件即可。