bootstrap scss 添加自定义变量，修改自定义变量 详细方法

Bootstrap SCSS (Sass版本) 允许你添加自定义变量，这有助于统一样式并提高代码复用性。以下是添加和修改自定义变量的详细步骤：

1. **创建自定义变量**：
- 打开 `variables.scss` 文件，它通常位于 `bootstrap/scss` 目录下。
- 在文件顶部，你可以找到预定义的全局变量。在这些变量下方，开始定义新的自定义变量，例如：

     $my-custom-color: #ff0000; // 创建一个红色作为示例

- 变量名称应以 `$` 开头，并遵循驼峰命名法。

2. **引用自定义变量**：
- 当你需要应用新变量时，在需要的地方使用 `map-get()` 函数或直接引用变量名，如：

     .my-element {
       background-color: map-get($colors, my-custom-color); // 如果有映射
     } or
     .my-element {
         color: $my-custom-color;
     }

3. **保存并编译**：
- 编辑完成后，保存你的更改。然后通过运行命令行工具（如 Node.js 的 `node-sass` 或 IDE 插件），将SCSS转换成CSS。这个过程会自动应用你的自定义变量。

4. **修改变量**：
- 如果需要更新某个自定义变量，只需在 `variables.scss` 中相应的位置更改其值即可，再次编译项目就会应用新的设置。

注意，如果你使用的是 Bootstrap 5 的 SCSS 版本，那么官方已经引入了更简洁的变量语法。记得在使用自定义变量前查看文档以确认最新变更。