CSS хувьсагч

Bootstrap нь эмхэтгэсэн 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-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);
}