CSS ცვლადები

Bootstrap შეიცავს ბევრ CSS პერსონალურ თვისებას (ცვლადი) თავის შედგენილ CSS-ში რეალურ დროში დაკონფიგურირებისთვის Sass-ის ხელახალი კომპილაციის გარეშე. ისინი უზრუნველყოფენ ადვილად წვდომას ჩვეულებრივ გამოყენებულ მნიშვნელობებზე, როგორიცაა ჩვენი თემის ფერები, წყვეტების წერტილები და ძირითადი შრიფტების დასტა თქვენი ბრაუზერის ინსპექტორში მუშაობისას, კოდის სავარჯიშოში ან ზოგადი პროტოტიპების შექმნისას.

ჩვენს ყველა მორგებულ თვისებას აქვს პრეფიქსი,bs- რათა თავიდან ავიცილოთ კონფლიქტი მესამე მხარის CSS-თან.

ძირეული ცვლადები

აქ არის ცვლადები, რომლებიც ჩვენ ჩავრთავთ (გაითვალისწინეთ, რომ :rootეს აუცილებელია), რომლებზეც წვდომა შეიძლება ნებისმიერ ადგილას, სადაც ჩატვირთულია Bootstrap-ის CSS. ისინი განთავსებულია ჩვენს _root.scssფაილში და შედის ჩვენს შედგენილ დისტანციურ ფაილებში.

: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, დავრწმუნდეთ, რომ სტილები არ იქნება მემკვიდრეობითი ისეთ ადგილებში, როგორიცაა წყობილი ცხრილები და დავუშვებთ Bootstrap კომპონენტების რამდენიმე ძირითადი რესტაილირებას და გაფართოებას Sass კომპილაციის შემდეგ.

გადახედეთ ჩვენს ცხრილის დოკუმენტაციას, რათა გაიგოთ, თუ როგორ ვიყენებთ 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-ში.