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 browserkaaga, 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-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;
}

Doorsoomayaasha qaybaha

Waxaan sidoo kale bilaabaynaa inaan u isticmaalno guryaha gaarka ah doorsoomayaal maxalli ah oo qaybo kala duwan ah. Sidan ayaanu u yarayn karnaa CSS-tayada la soo ururiyey, waxaanu hubin karnaa in qaababka aan lagu dhaxli karin meelaha sida miisaska buulka leh, oo aanu u ogolaan karno dib u habeynta aasaasiga ah iyo fidinta qaybaha Bootstrap ka dib marka Sass la sameeyo.

U fiirso dukumeentiyada miiska si aad u aragtid sida aan u isticmaalno doorsoomayaasha CSS .

Waxaan sidoo kale isticmaaleynaa doorsoomayaasha CSS ee dhammaan shabaqyadayada-gaar ahaan marinnada-mareennada-iyada oo la isticmaalayo qaybo badan oo mustaqbalka ah.

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 qaar ka mid ah xiriiriyeyaasha waxtarka leh. Waqtigan xaadirka ah, waxaad isticmaali kartaa doorsoomayaashan xaaladaha kale ee CSS, iyo sidoo kale JavaScript kaaga.