查找控制特定 CSS 规则的 Bootstrap 变量

【问题标题】：Finding the Bootstrap variable that controls a specific CSS rule查找控制特定 CSS 规则的 Bootstrap 变量
【发布时间】：2016-12-14 11:58:42
【问题描述】：

我正在使用 Bootstrap 3 开发应用程序。我使用 Sass/SCSS 巧妙地自定义 Bootstrap 变量。

我目前正在设计“选项卡”组件的样式，但我似乎无法弄清楚如果有一个特定的变量控制它的文本颜色，或者它是否是从其他地方继承的。

确定来自 Bootstrap 的 CSS 规则的“来源”的好方法是什么？我在 OSX 上使用 Chrome。

【问题讨论】：

搜索应用于 tab 的 CSS 类并在 SCSS 文件中搜索。
@hungerstar：这就是我现在正在做的事情，这对我来说变得非常低效......
您在 Bootstrap 3 中处理的组件的实际名称是什么？ “选项卡” 没有多大帮助。
@hungerstar：这是“导航”的一部分：getbootstrap.com/components/#nav-tabs

标签： css twitter-bootstrap sass

【解决方案1】：

我刚刚检查了 bootstrap site 上的选项卡，并在引导程序 scss 文件中搜索了 .nav-tabs 类。所以在_navs.scss 文件中，搜索“tabs”，你会看到变量。

看起来$nav-tabs-active-link-hover-color 可能是您要查找的内容 - 它是活动选项卡的文本颜色。非活动选项卡中的锚点似乎是默认的锚点标记颜色。

您可以在_variables.scss 文件中找到该变量。变量通常根据使用它们的组件命名（即$nav-tabs-active-<whatever>）。

  // Active state, and its :hover to override normal :hover
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: $nav-tabs-active-link-hover-color; // ****** here
        background-color: $nav-tabs-active-link-hover-bg;
        border: 1px solid $nav-tabs-active-link-hover-border-color;
        border-bottom-color: transparent;
        cursor: default;
      }
    }

【讨论】：