Suchen der Bootstrap-Variable, die eine bestimmte CSS-Regel steuert

Question

Ich entwickle eine Anwendung mit Bootstrap 3. Ich benutze Sass/SCSS, um die Bootstrap-Variablen sauber anzupassen.

Ich bin derzeit die „Tabs“ Komponente Styling und ich kann nicht herausfinden scheinen, wenn es eine bestimmte Variable, die seine Textfarbe steuert, oder wenn sie von woanders geerbt worden ist.

Was ist ein guter Weg, um die "Quelle" einer CSS-Regel zu ermitteln, die von Bootstrap kommt? Ich verwende Chrome unter OSX.

Answer 1

Ich habe gerade die Registerkarte auf der bootstrap site untersucht und suchte nach der .nav-tabs Klasse in den Bootstrap-SCS-Dateien. Suchen Sie in der Datei _navs.scss nach "tabs" und Sie sehen die Variablen.

Es sieht nach $nav-tabs-active-link-hover-color aus, was Sie suchen - es ist die Textfarbe des aktiven Tabs. Die Anker in den nicht aktiven Registerkarten scheinen die Standardfarbe für Ankerpunkte zu sein.

Sie können diese Variable in der Datei _variables.scss finden. Die Variablen werden normalerweise gemäß der Komponente benannt, die sie verwendet (d. H. $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; 
     } 
    }