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

Enkyukakyuka z’ebitundu

Era tutandise okukozesa eby'obugagga eby'ennono nga enkyukakyuka ez'ekitundu ku bitundu eby'enjawulo. Mu ngeri eno tusobola okukendeeza ku CSS yaffe ekung’aanyiziddwa, okukakasa nti emisono tegisikira mu bifo nga emmeeza eziteekeddwa mu kisenge, n’okukkiriza 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 .

Tukozesa n’enkyukakyuka za CSS mu grids zaffe zonna —okusinga ku gutters —n’okukozesa ebitundu ebisingawo kujja mu biseera eby’omu maaso.

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.