doorsoomayaasha CSS

Bootstrap waxa ku jira hanti badan oo CSS gaar ah (kala duwanaansho) oo ku jira CSS-keeda la soo ururiyey ee wax ka beddelka waqtiga-dhabta ah iyada oo aan loo baahnayn in dib loo soo ururiyo Sass. Kuwani waxay si fudud u helaan qiyamka caadiga ah ee la isticmaalo sida midabada mawduucayada, meelaha goynta, iyo xidhmooyinka farta aasaasiga ah marka aad ka shaqaynayso kormeeraha biraawsarkaaga, sanduuqa koodka, ama qaabaynta guud.

Dhammaan guryahayaga gaarka ah waa lagu horgaleyaybs- si looga fogaado isku dhacyada CSS cid saddexaad.

Doorsoomayaasha xididka

Waa kuwan doorsoomayaasha aan ku darno (xusuusnow in :rootloo baahan yahay) kuwaas oo laga geli karo meel kasta oo Bootstrap's CSS la raro. Waxay ku yaalliin _root.scssfaylkayaga oo lagu daray faylalkayaga la ururiyey.

: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;
}

Doorsoomayaasha qaybaha

Bootstrap 5 ayaa sii kordheysa u adeegsiga guryaha gaarka ah sida doorsoomayaasha maxalliga ah ee qaybaha kala duwan. Sidan ayaanu u yaraynaa CSS-tayada la soo ururiyey, waxaanu hubinaynaa in qaababka aan laga dhaxlin meelaha sida miisaska buulka leh, oo aanu u ogolaano dib-u-habayn aasaasi ah iyo fidinta qaybaha Bootstrap ka dib ururinta Sass.

U fiirso dukumeentiyada miiska si aad u aragtid sida aan u isticmaalno doorsoomayaasha CSS . Navbaryadayadu sidoo kale waxay isticmaalaan doorsoomayaasha CSS sida v5.2.0. Waxa kale oo aanu isticmaalnaa doorsoomayaasha CSS-ta guud ahaan shabaqyadayada-gaar ahaan marin-biyoodka-ka-duwanaanshaha cusub ee Shabakadda CSS- iyada oo qaybo badan oo ka mid ah la adeegsan doono mustaqbalka.

Mar kasta oo ay suurtogal tahay, waxaanu ku meelayn doonaa doorsoomayaasha CSS ee heerka qaybta aasaasiga ah (tusaale, .navbarnavbar iyo qayb-hoosaadyadeeda). Tani waxay yaraynaysaa mala awaalka halka iyo sida loo habayn karo, waxayna ogolanaysaa in kooxdeena ay si fudud wax uga bedelaan cusboonaysiinta mustaqbalka.

Horgale

Inta badan doorsoomayaasha CSS waxay adeegsadaan horgale si ay uga fogaadaan isku dhacyada codebase adiga kuu gaar ah. Horgalayaashani waxa u dheer --ka looga baahan yahay doorsoome kasta oo CSS ah.

Ku beddel horgalaha adigoo isticmaalaya $prefixdoorsoomaha Sass. Sida caadiga ah, waxa lagu dejiyay bs-(u fiirso cidhifka raadraaca).

Tusaalooyinka

Doorsoomayaasha CSS waxay bixiyaan dabacsanaan la mid ah doorsoomayaasha Sass, laakiin iyada oo aan loo baahnayn isku-dubarid ka hor inta aan loo gudbin browserka. Tusaale ahaan, halkan waxaan dib u dajinaynaa farta boggayaga iyo qaababka isku xidhka doorsoomayaasha CSS.

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

Baraha goynta

In kasta oo aan ku darno dhibcaha jabsiga shabakadaha sida doorsoomayaasha CSS (marka laga reebo xs), la soco in doorsoomayaasha CSS aanay ku shaqaynayn weydiimaha warbaahinta . Kani waa qaabaynta ku jirta CSS nooca doorsoomayaasha, laakiin waxa laga yaabaa inay isbeddelaan sanadaha soo socda iyadoo la taageerayo env()doorsoomayaasha. U fiirso jawaabtan isbiirsaday ee is dulfuulan si aad u hesho xiriiriyeyaasha waxtarka leh. Dhanka kale, waxaad isticmaali kartaa doorsoomayaashan xaaladaha kale ee CSS, iyo sidoo kale JavaScript kaaga.