특정 CSS 규칙을 제어하는 ​​부트 스트랩 변수 찾기

Question

부트 스트랩 3을 사용하여 응용 프로그램을 개발 중입니다. Sass/SCSS를 사용하여 부트 스트랩 변수를 깔끔하게 사용자 정의합니다.

내가 현재 "탭"구성 요소를 스타일링하고있어 거기의 텍스트 색상을 제어하는 ​​특정 변수, 또는 만약 내가 알아낼 수 없습니다 그것은 다른 곳에서 상속 된 않다면.

부트 스트랩에서 오는 CSS 규칙의 "소스"를 결정하는 좋은 방법은 무엇입니까? OSX에서 Chrome을 사용합니다.

Answer 1

방금 ​​bootstrap site에있는 탭을 검사하고 부트 스트랩 scss 파일에서 .nav-tabs 클래스를 검색했습니다. 따라서 _navs.scss 파일에서 "탭"을 검색하면 변수가 표시됩니다.

$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; 
     } 
    }