Jijjiiramoota CSS

Bootstrap Sass irra deebiin qindeessuu osoo hin barbaachisin dhuunfachiisuuf yeroo dhugaa CSS isaa qindaa'e keessatti qabeentota amala CSS (jijjiiramoota) hedduu of keessatti qabata. Isaan kun yeroo inspeektaraa biraawzari keetii, saanduqa cirrachaa koodii, ykn proototaayipii waliigalaa keessatti hojjettu gatiiwwan yeroo baay'ee itti fayyadamnu kan akka halluuwwan mata duree keenyaa, qabxiiwwan cabbii, fi tuullaawwan qubee jalqabaa salphaatti argachuuf ni kennu.

Amaloonni amala keenya hundibs- CSS qaama sadaffaa waliin waldhabdee akka hin uumamneef durtii waliin qaban.

Jijjiiramoota hundee

Jijjiiramoonni nuti hammachiifnu (hubadhu kan :rootbarbaachisaa ta'uu isaa) kanneen bakka kamiyyuu Bootstrap's CSS fe'amutti argamuu danda'an kunooti. Isaanis _root.scssfaayilii keenya keessatti kan argaman yoo ta'u, faayiloota dist keenya qindaa'an keessatti hammatamaniiru.

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

Jijjiiramoota qaama

Bootstrap 5 amaloota amala akka jijjiiramoota naannoo qaamolee adda addaatiif fayyadamaa jira. Haala kanaan CSS keenya qindaa'e hir'isna, akkaataan iddoowwan akka gabatee man'eetti akka hin dhaalamne mirkaneessina, akkasumas qindeessaa Sass booda qaamolee Bootstrap irra deebiin akkaataa bu'uuraa fi dheeressuu tokko tokko hayyamna.

Akkaataa jijjiiramoota CSS itti fayyadamnu hubannoo tokko tokkoof galmee gabatee keenya ilaali . Navbaroonni keenyas jijjiiramoota CSS akka v5.2.0tti fayyadamu. Akkasumas jijjiiramoota CSS tarjaa keenya hunda keessatti fayyadamaa jirra-duratti gutters the new opt-in CSS grid —itti fayyadamni qaama dabalataa gara fuulduraatti dhufaa jira.

Yeroo danda'ametti, jijjiiramoota CSS sadarkaa qaama bu'uuraa irratti ni ramadna (fkn, .navbarnavbar fi qaamolee xiqqaa isaatiif). Kunis eessatti fi akkamitti akka dhuunfachiifnu tilmaama hir'isa, akkasumas fooyya'iinsa gara fuula duraatti gareen keenyaan fooyya'iinsa salphaa ta'e ni hayyama.

Durtii

Jijjiiramoonni CSS baay'een isaanii kuusaa koodii mataa keetii wajjin walitti bu'iinsa akka hin uumamneef durtii fayyadamu. Durtii kun --jijjiiramaa CSS hunda irratti kan barbaachisu irratti dabalata.

Durtii karaa $prefixjijjiiramaa Sass dhuunfachiisi. Akka durtiitti, gara bs-(daashiin duubaa hubadhu)tti qindaa'a.

Fakkeenyaaf

Jijjiiramoonni CSS jijjiiramoota Sass wajjin wal fakkaatu kan dhiyeessan, garuu osoo gara biraawzariitti hin tajaajilamin dura qindeessuu osoo hin barbaachisin. Fakkeenyaaf, asitti qubee fuula keenyaa fi akkaataa walqabsiisaa jijjiiramoota CSS waliin deebisaa jirra.

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

Qabxiilee ciccitaa giiridii

Qabxiilee ciccituu tarjaa keenyaa akka jijjiiramoota CSStti yeroo hammannu ( xs), jijjiiramoonni CSS gaaffiiwwan miidiyaa keessatti akka hin hojjenne beekaa . Kunis jijjiiramootaaf CSS spec keessatti dizaayiniidhaan, garuu waggoota dhufan keessatti jijjiiramootaaf deeggarsa waliin env()jijjiiramuu danda'a. Hidhamtoota gargaaraa tokko tokkoof deebii Stack Overflow kana ilaalaa . Gidduu kana, jijjiiramoota kana haalawwan CSS biroo keessatti, akkasumas JaavaScript kee keessatti fayyadamuu dandeessa.