Enkyukakyuka za CSS

Bootstrap erimu ebintu bingi ebya CSS eby’ennono (enkyukakyuka) mu CSS yaayo ekung’aanyiziddwa okusobola okulongoosa mu kiseera ekituufu awatali kwetaaga kuddamu kukungaanya Sass. Bino biwa ekkubo eryangu eri emiwendo egyakozesebwa ennyo nga langi zaffe ez’omulamwa, ebifo eby’okumenyawo, n’ebisenge by’empandiika ebisookerwako ng’okola mu mukebera wa bbulawuzi yo, mu sandbox ya koodi, oba okukola prototyping eya bulijjo.

Ebintu byaffe byonna eby’ennono bisookerwako nebs- okwewala okukontana ne CSS ey’omuntu ow’okusatu.

Enkyukakyuka z’ebikolo

Wano waliwo enkyukakyuka ze tussaamu (weetegereze nti the :rootyeetaagibwa) ezisobola okuyingizibwa wonna wa Bootstrap’s CSS w’etikkibwa. Zisangibwa mu _root.scssfayiro yaffe era nga ziteekeddwa mu fayiro zaffe eza dist ezikung'aanyiziddwa.

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

Enkyukakyuka z’ebitundu

Bootstrap 5 yeeyongera okukozesa eby’obugagga eby’ennono nga enkyukakyuka ez’ekitundu ku bitundu eby’enjawulo. Mu ngeri eno tukendeeza ku CSS yaffe ekung’aanyiziddwa, okukakasa nti emisono tegisikira mu bifo nga emmeeza eziteekeddwa mu kisenge, era tukkiriza okuddamu okukola sitayiro ezimu ezisookerwako n’okugaziya ebitundu bya Bootstrap oluvannyuma lw’okukung’aanya kwa Sass.

Laba ebiwandiiko byaffe eby'emmeeza okufuna amagezi ku ngeri gye tukozesaamu enkyukakyuka za CSS . Navbars zaffe nazo zikozesa enkyukakyuka za CSS okuva ku v5.2.0. Tukozesa n’enkyukakyuka za CSS mu grids zaffe zonna —okusinga ku gutters the new opt-in CSS grid —n’okukozesa ebitundu ebisingawo kujja mu biseera eby’omu maaso.

Buli lwe kiba kisoboka, tujja kugaba enkyukakyuka za CSS ku ddaala ly’ekitundu eky’omusingi (okugeza, .navbarku navbar n’ebitundu byayo ebitonotono). Kino kikendeeza ku kuteebereza wa n’engeri y’okulongoosaamu, era kisobozesa enkyukakyuka ennyangu ttiimu yaffe mu bipya ebigenda okukolebwa mu biseera eby’omu maaso.

Entandikwa

Enkyukakyuka za CSS ezisinga zikozesa entandikwa okwewala okutomeragana ne codebase yo. Entandikwa eno eyongezeddwa ku --ekyo ekyetaagisa ku buli nkyukakyuka ya CSS.

Okulongoosa entandikwa ng'oyita mu $prefixnkyukakyuka ya Sass. Nga bwekiba, kiteekeddwa ku bs-(weetegereze dashi eddirira).

Eby’okulabirako

Enkyukakyuka za CSS ziwa okukyukakyuka okufaananako n'enkyukakyuka za Sass, naye nga tekyetaagisa kukungaanya nga tezinnaweebwa ku bulawuzi. Okugeza, wano tuddamu okuteekawo efonti y’olupapula lwaffe n’emisono gy’okuyunga n’enkyukakyuka za CSS.

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

Ebifo ebikutukamu giridi

Wadde nga tussaamu ebifo byaffe eby’okumenya giridi nga enkyukakyuka za CSS (okuggyako xs), kimanye nti enkyukakyuka za CSS tezikola mu kubuuza kw’emikutu . Kino kikolebwa mu dizayini mu CSS spec for variables, naye kiyinza okukyuka mu myaka egijja nga waliwo obuwagizi eri env()variables. Laba eky'okuddamu kino ekya Stack Overflow okufuna ebimu ku bikwatagana ebiyamba. Mu kiseera kino, osobola okukozesa enkyukakyuka zino mu mbeera endala eza CSS, awamu ne mu JavaScript yo.