Athróga CSS

Áiríonn Bootstrap go leor airíonna saincheaptha CSS (athróga) ina CSS tiomsaithe le haghaidh saincheaptha fíor-ama gan gá le Sass a ath-thiomsú. Soláthraíonn siad seo rochtain éasca ar luachanna a úsáidtear go coitianta ar nós ár ndathanna téama, ár bristephointí, agus stoic chló príomhúla agus tú ag obair i gcigire do bhrabhsálaí, i mbosca gainimh cód, nó i bhfréamhshamhlú ginearálta.

Déantar ár n-airíonna saincheaptha go léir a réamhshocrúbs- chun coinbhleachtaí le CSS tríú páirtí a sheachaint.

Athróga fréamhacha

Seo iad na hathróga atá san áireamh againn (tabhair faoi deara go :rootbhfuil siad riachtanach) ar féidir rochtain a fháil orthu áit ar bith a bhfuil CSS Bootstrap lódáilte. Tá siad lonnaithe inár _root.scssgcomhad agus cuimsítear iad inár gcomhaid chiníochais tiomsaithe.

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

Athróga Comhpháirte

Táimid ag tosú freisin ar úsáid a bhaint as airíonna saincheaptha mar athróga áitiúla le haghaidh comhpháirteanna éagsúla. Ar an mbealach seo is féidir linn ár CSS tiomsaithe a laghdú, a chinntiú nach bhfaightear stíleanna le hoidhreacht in áiteanna cosúil le táblaí neadaithe, agus ligean do roinnt athshonrú bunúsach agus síneadh a chur le comhpháirteanna Bootstrap tar éis tiomsú Sass.

Breathnaigh ar ár gcáipéisíocht tábla chun léargas a fháil ar an gcaoi a bhfuil athróga CSS á n-úsáid againn .

Tá athróga CSS á n-úsáid againn freisin thar ár ngreillí - go príomha le haghaidh gáitéir - agus úsáid níos mó comhpháirteanna ag teacht amach anseo.

Samplaí

Cuireann athróga CSS solúbthacht cosúil le hathróga Sass ar fáil, ach gan gá le tiomsú sula ndéantar iad a sheirbheáil ar an mbrabhsálaí. Mar shampla, anseo táimid ag athshocrú cló ár leathanaigh agus stíleanna naisc le hathróga CSS.

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

Brisphointí eangaí

Cé go gcuirimid ár bristephointí eangaí san áireamh mar athróga CSS (seachas i gcás xs), bí ar an eolas nach n-oibríonn athróga CSS le fiosrúcháin ó na meáin chumarsáide . Déantar é seo de réir dearadh sa shonraíocht CSS d’athróga, ach d’fhéadfadh sé athrú sna blianta amach romhainn le tacaíocht d’ env()athróga. Seiceáil an freagra Stack Overflow seo le haghaidh roinnt nasc cabhrach. Idir an dá linn, is féidir leat na hathróga seo a úsáid i gcásanna CSS eile, agus i do JavaScript freisin.