색깔
부트스트랩은 우리의 스타일과 구성 요소를 테마로 하는 광범위한 색상 시스템에서 지원됩니다. 이를 통해 모든 프로젝트에 대해 보다 포괄적인 사용자 지정 및 확장이 가능합니다.
테마 색상
모든 색상의 하위 집합을 사용하여 색 구성표를 생성하기 위한 더 작은 색상 팔레트를 생성합니다. 또한 부트스트랩 scss/_variables.scss
파일에서 Sass 변수 및 Sass 맵으로도 사용할 수 있습니다.
이 모든 색상은 Sass 맵으로 사용할 수 있습니다 $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
이러한 색상을 수정하는 방법은 Sass 맵 및 루프 문서 를 확인하세요 .
모든 색상
모든 부트스트랩 색상은 파일의 Sass 변수 및 Sass 맵으로 사용할 수 있습니다 scss/_variables.scss
. 파일 크기 증가를 방지하기 위해 이러한 각 변수에 대해 텍스트 또는 배경 색상 클래스를 생성하지 않습니다. 대신 테마 팔레트 에 대해 이러한 색상의 하위 집합을 선택합니다 .
색상을 사용자 정의할 때 명암비를 모니터링해야 합니다. 아래와 같이 기본 색상 각각에 세 가지 대비 비율을 추가했습니다. 하나는 견본의 현재 색상, 하나는 흰색, 다른 하나는 검정색입니다.
Sass에 대한 참고 사항
Sass는 프로그래밍 방식으로 변수를 생성할 수 없으므로 모든 색조 및 음영에 대한 변수를 직접 생성했습니다. 중간점 값(예: $blue-500
)을 지정하고 사용자 정의 색상 기능을 사용하여 Sass의 색상 기능을 통해 색상을 색조(밝게) 또는 음영(어둡게) mix()
합니다.
를 사용 하는 것은 and와 mix()
같지 않습니다. 전자는 지정된 색상을 흰색 또는 검정색과 혼합하고 후자는 각 색상의 밝기 값만 조정합니다. 결과는 이 CodePen 데모에서 볼 수 있듯이 훨씬 더 완전한 색상 모음입니다 .lighten()
darken()
우리의 tint-color()
및 shade-color()
함수는 우리가 생산하는 각 혼합 색상에 대해 단계별 백분율 값을 지정하는 변수 mix()
와 함께 사용합니다. 전체 소스 코드 는 및 파일을 $theme-color-interval
참조하십시오 .scss/_functions.scss
scss/_variables.scss
컬러 사스 맵
Bootstrap의 소스 Sass 파일에는 색상 목록과 해당 16진수 값을 빠르고 쉽게 반복할 수 있는 세 가지 맵이 포함되어 있습니다.
$colors
500
사용 가능한 모든 기본( ) 색상 을 나열합니다 .$theme-colors
의미상 명명된 모든 테마 색상을 나열합니다(아래 참조).$grays
회색의 모든 색조와 음영을 나열합니다.
에서 scss/_variables.scss
Bootstrap의 색상 변수와 Sass 맵을 찾을 수 있습니다. 다음은 $colors
Sass 맵의 예입니다.
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
맵 내에서 값을 추가, 제거 또는 수정하여 다른 많은 구성요소에서 값이 사용되는 방식을 업데이트합니다. 불행히도 현재로서는 모든 구성 요소가 이 Sass 맵을 사용하는 것은 아닙니다. 향후 업데이트에서는 이를 개선하기 위해 노력할 것입니다. 그때까지 ${color}
변수와 이 Sass 맵을 사용할 계획입니다.
예시
Sass에서 이것을 사용하는 방법은 다음과 같습니다.
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
색상 값을 설정 하고 사용하는 데 색상 및 배경 유틸리티 클래스도 사용할 수 있습니다 .color
background-color
500