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

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

შეძლებისდაგვარად, ჩვენ მივანიჭებთ CSS ცვლადებს საბაზისო კომპონენტის დონეზე (მაგ., .navbarnavbar და მისი ქვეკომპონენტებისთვის). ეს ამცირებს იმის გამოცნობას, თუ სად და როგორ უნდა მოხდეს მორგება, და საშუალებას აძლევს ჩვენი გუნდის მარტივად შეცვალოს მომავალი განახლებები.

პრეფიქსი

CSS ცვლადების უმეტესობა იყენებს პრეფიქსს, რათა თავიდან აიცილოს შეჯახება თქვენს კოდურ ბაზასთან. ეს პრეფიქსი ემატება --ყველა CSS ცვლადზე საჭირო პრეფიქსის.

პრეფიქსის მორგება $prefixSass ცვლადის საშუალებით. ნაგულისხმევად, ის დაყენებულია bs-(გაითვალისწინეთ ბოლო ტირე).

მაგალითები

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-ში.