CSS 변수
빠르고 미래 지향적인 디자인 및 개발을 위해 Bootstrap의 CSS 사용자 정의 속성을 사용하십시오.
부트스트랩에는 컴파일된 CSS에 약 24개의 CSS 사용자 정의 속성(변수) 이 포함 되어 있으며 구성 요소별로 개선된 사용자 정의를 위해 수십 개가 더 있습니다. 이를 통해 브라우저 인스펙터, 코드 샌드박스 또는 일반 프로토타이핑에서 작업할 때 테마 색상, 중단점 및 기본 글꼴 스택과 같이 일반적으로 사용되는 값에 쉽게 액세스할 수 있습니다.
bs-타사 CSS와의 충돌을 피하기 위해 모든 사용자 정의 속성에는 접두사가 붙습니다 .
루트 변수
:root다음은 Bootstrap의 CSS가 로드되는 모든 곳에서 액세스할 수 있는 우리가 포함하는 변수입니다(필수 사항에 유의 ). 그것들은 우리 _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 컴파일 후 부트스트랩 구성 요소의 기본적인 스타일 변경 및 확장을 허용할 수 있습니다.
CSS 변수를 사용하는 방법에 대한 통찰력은 표 문서를 참조 하십시오 .
또한 그리드 전반에 걸쳐 CSS 변수를 사용하고 있습니다(주로 거터용). 앞으로 더 많은 구성 요소를 사용하게 될 것입니다.
예
CSS 변수는 Sass의 변수와 유사한 유연성을 제공하지만 브라우저에 제공되기 전에 컴파일할 필요가 없습니다. 예를 들어 여기에서는 CSS 변수를 사용하여 페이지의 글꼴 및 링크 스타일을 재설정합니다.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}