CSS ცვლადები

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

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

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

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

მაგალითები

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

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