Bootstrap은 컴파일된 CSS에 약 24개의 CSS 사용자 정의 속성(변수)를 포함하고 있으며, 컴포넌트별 재정의를 개선하기 위해 더 많은 변수들을 준비하고 있습니다. 이들은 브라우저의 검사기, 코드 샌드박스 또는 일반 프로토타입으로 작업할때 테마 색상, 중단점, 주요 글꼴 스택과 같이 일반적으로 자주 사용되는 값에 대해 간단하게 접근을 제공합니다.
제 3의 CSS와의 충돌을 피하기 위해 모든 사용자 정의 속성 앞에 bs-가 붙습니다.
최상위 변수
여기에는 Bootstrap의 CSS가 포함된 곳이면 어디에서나 접근할 수 있는(:root가 필수인 것에 주의해 주세요) 변수가 있습니다. 이들은 _root.scss 파일 안에 있음며 컴파일된 dist 파일에 포함되어 있습니다.
:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
컴포넌트 변수
그리고 사용자 정의 속성을 여러 컴포넌트의 로컬 변수로 이용하는 것도 시작하고 있습니다. 이렇게 함으로써 컴파일된 CSS를 줄이고, 중첩된 테이블과 같은 곳에서 스타일이 상속되지 않도록 하며, Sass 컴파일 후에 Bootstrap 컴포넌트의 기본적인 스타일 변경과 확장을 가능하게 합니다.
우리가 어떻게 CSS 변수를 사용하고 있는지에 대해서는 테이블 문서를 확인해 주세요.
또한 주로 그리드의 거터에 CSS 변수를 사용하고 있는데 - 향후 더 많은 컴포넌트를 사용하게 될 것입니다.
예시
CSS 변수는 Sass 변수와 동일한 유연성을 제공하지만 브라우저에 제공되기 전에 컴파일할 필요는 없습니다. 예를 들어, 여기에서는 페이지의 글꼴이나 링크의 스타일을 CSS 변수로 재설정하고 있습니다.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}