CSS хувьсагч

Bootstrap нь хөрвүүлсэн CSS-дээ Sass-ийг дахин хөрвүүлэх шаардлагагүйгээр бодит цагийн тохиргоонд зориулж 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-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 хувьсагч болгон (-ээс бусад) оруулсан хэдий ч CSS хувьсагч нь медиа асуулгад ажиллахгүйxs гэдгийг анхаарна уу . Энэ нь хувьсагчдад зориулсан CSS-ийн загвараар хийгдсэн боловч хувьсагчийн дэмжлэгтэйгээр ирэх жилүүдэд өөрчлөгдөж магадгүй юм . Энэ Stack Overflow хариултаас зарим хэрэгтэй холбоосыг үзээрэй . Энэ хооронд та эдгээр хувьсагчийг бусад CSS нөхцөлүүд болон JavaScript-д ашиглаж болно.env()