Bootstrap은 Sass를 재컴파일할 필요 없이 실시간 커스터마이징을 할 수 있도록 컴파일된 CSS에 많은 CSS 사용자 정의 속성 (변수)를 포함하고 있습니다. 이들은 브라우저의 검사기, 코드 샌드박스 또는 일반 프로토타입으로 작업할때 테마 색상, 중단점, 주요 글꼴 스택과 같이 일반적으로 자주 사용되는 값에 대해 간단하게 접근을 제공합니다.
서드파티 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-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--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-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--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));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-bg: #fff;
}
컴포넌트 변수
그리고 사용자 정의 속성을 여러 컴포넌트의 로컬 변수로 이용하는 것도 시작하고 있습니다. 이렇게 함으로써 컴파일된 CSS를 줄이고, 중첩된 테이블과 같은 곳에서 스타일이 상속되지 않도록 하며, Sass 컴파일 후에 Bootstrap 컴포넌트의 기본적인 스타일 변경과 확장을 가능하게 합니다.
우리가 어떻게 CSS 변수를 사용하고 있는지에 대해서는 테이블 문서를 확인해 주세요.
또한 주로 그리드의 거터에 CSS 변수를 사용하고 있는데 - 향후 더 많은 컴포넌트를 사용하게 될 것입니다.
예시
CSS 변수는 Sass 변수와 동일한 유연성을 제공하지만 브라우저에 제공되기 전에 컴파일할 필요는 없습니다. 예를 들어, 여기에서는 페이지의 글꼴이나 링크의 스타일을 CSS 변수로 재설정하고 있습니다.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
그리드 중단점
우리는 그리드 중단점을 CSS 변수로 포함시켰지만(xs 제외) CSS 변수는 미디어 쿼리에서 작동하지 않습니다. 이것은 변수에 대한 CSS 사양의 설계에 의한 것이지만 env() 변수에 대한 지원에 따라 향후 변경될 수 있습니다. 몇 가지 유용한 링크는 이 Stack Overflow 답변을 확인하세요. 그동안 다른 CSS 상황과 JavaScript에서 이러한 변수를 사용할 수 있습니다.