CSS如何复用其他类颜色？全局定义与Bootstrap颜色复用方案

当然有好几种靠谱的方案，完全不用去复制Bootstrap里的颜色值！我给你拆解几个实用的方法：

方案1：用CSS原生变量（最推荐，无需额外工具） #

Bootstrap从v4开始就内置了全局CSS变量，比如danger主题的颜色对应的变量是--bs-danger。你可以直接在自定义类里引用它，完全不用硬写颜色值：

.my-custom-class {
  /* 文字用danger颜色 */
  color: var(--bs-danger);
  /* 背景用danger颜色 */
  background-color: var(--bs-danger);
  /* 还能轻松调透明度，比如半透明背景 */
  background-color: rgba(var(--bs-danger-rgb), 0.5);
}

这样做最爽的是，如果你以后修改了Bootstrap的danger变量（或者用自定义主题覆盖了它），你的自定义类会自动同步更新，根本不用手动改多处代码。

方案2：用Sass预处理器（如果项目用了Sass） #

要是你的项目是基于Sass构建的，而且引入了Bootstrap的Sass源文件，那直接用Bootstrap内置的Sass变量就行：

// 先导入Bootstrap的Sass文件
@import "bootstrap/scss/bootstrap";

.my-custom-class {
  color: $danger;
  background-color: $danger;
}

甚至还能通过@extend直接继承danger类的所有样式，再加上自己的自定义样式：

.my-custom-class {
  @extend .text-danger;
  font-weight: bold; // 额外加个粗体样式
}

方案3：直接复用Bootstrap的工具类 #

如果你的需求只是给元素加上danger颜色，其实不用写新CSS，直接在HTML里同时用Bootstrap的工具类和你的自定义类就行：

<div class="my-custom-class text-danger">这是一段带自定义样式的红色文字</div>

这样既保留了你自定义类的专属样式，又直接用上了Bootstrap的danger颜色，省事又靠谱。

关于“在一个CSS类里导入另一个类的颜色” #

纯CSS里没有直接“导入”另一个类属性的语法，但用上面的CSS变量就能间接实现——把颜色定义成全局变量，所有需要的类都引用这个变量，本质上就是全局复用，修改的时候只改一次变量值就搞定所有引用的地方。

内容的提问来源于stack exchange，提问作者Dan