CSS хувьсагч

Bootstrap нь Sass-ийг дахин эмхэтгэх шаардлагагүйгээр бодит цагийн тохиргоонд зориулж хөрвүүлсэн CSS-дээ олон CSS хувийн шинж чанарыг (хувьсагч) агуулдаг. Эдгээр нь таны хөтчийн шалгагч, кодын хамгаалагдсан хязгаарлагдмал орчин эсвэл ерөнхий загварчлал дээр ажиллах үед манай загварын өнгө, таслах цэг, үндсэн үсгийн стек зэрэг түгээмэл хэрэглэгддэг утгуудад хялбар хандах боломжийг олгодог.

bs-Гуравдагч этгээдийн CSS-тэй зөрчилдөхөөс зайлсхийхийн тулд манай бүх хувийн шинж чанаруудыг угтвар болгон оруулсан болно.

Үндэс хувьсагч

:rootBootstrap-ийн 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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Бүрэлдэхүүн хэсгүүдийн хувьсагчид

Bootstrap 5 нь янз бүрийн бүрэлдэхүүн хэсгүүдийн локал хувьсагч болгон тусгай шинж чанарыг улам бүр ашиглаж байна. Ингэснээр бид эмхэтгэсэн CSS-ээ багасгаж, хэв маягийг үүрлэсэн хүснэгт гэх мэт газруудад удамшуулахгүй байхыг баталгаажуулж, Sass эмхэтгэлийн дараа Bootstrap бүрэлдэхүүн хэсгүүдийн үндсэн хэлбэрийг өөрчлөх, өргөтгөх боломжийг олгодог.

Бидний CSS хувьсагчдыг хэрхэн ашиглаж байгаа талаарх ойлголтыг авахын тулд манай хүснэгтийн баримт бичгийг харна уу . Манай navbars v5.2.0-ийн хувьд CSS хувьсагчдыг бас ашигладаг . Бид мөн CSS хувьсагчдыг сүлжээндээ ашиглаж байгаа бөгөөд голчлон шинэ CSS сүлжээг ашиглахад зориулагдсан бөгөөд цаашид илүү олон бүрэлдэхүүн хэсэг ашиглах болно.

Боломжтой бол бид үндсэн бүрэлдэхүүн хэсгийн түвшинд (жишээ нь, .navbarnavbar болон түүний дэд бүрэлдэхүүн хэсгүүдийн хувьд) CSS хувьсагчдыг хуваарилах болно. Энэ нь хаана, хэрхэн өөрчлөх талаар таамаглахыг багасгаж, цаашдын шинэчлэлтүүдэд манай баг хялбархан өөрчлөх боломжийг олгодог.

Угтвар

Ихэнх CSS хувьсагч нь өөрийн кодын сантай зөрчилдөхөөс зайлсхийхийн тулд угтварыг ашигладаг. Энэ угтвар нь --CSS хувьсагч бүрт шаардлагатай нэмэлт зүйл юм.

$prefixSass хувьсагчаар угтварыг тохируулна уу. Өгөгдмөлөөр үүнийг тохируулсан байна bs-(дараагийн зураасыг анхаарна уу).

Жишээ

CSS хувьсагч нь Sass-ийн хувьсагчтай ижил уян хатан байдлыг санал болгодог боловч хөтчид үйлчлэхээс өмнө эмхэтгэх шаардлагагүй. Жишээлбэл, бид хуудасныхаа фонт болон холбоосын хэв маягийг CSS хувьсагчаар дахин тохируулж байна.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

Сүлжээний таслах цэгүүд

Бид сүлжээний таслах цэгүүдийг CSS хувьсагч болгон (-ээс бусад) оруулсан хэдий ч CSS хувьсагч нь медиа асуулгад ажиллахгүйxs гэдгийг анхаарна уу . Энэ нь хувьсагчдад зориулсан CSS-ийн загвараар хийгдсэн боловч хувьсагчийн дэмжлэгтэйгээр ирэх жилүүдэд өөрчлөгдөж магадгүй юм . Энэ Stack Overflow хариултаас зарим хэрэгтэй холбоосыг үзээрэй . Энэ хооронд та эдгээр хувьсагчийг бусад CSS нөхцөлүүд болон JavaScript-д ашиглаж болно.env()