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

Jijjiiramoota qaama

Akkasumas amaloota amala akka jijjiiramoota naannoo qaamolee adda addaatiif fayyadamuu jalqabneerra. Haala kanaan CSS keenya qindaa'e hir'isuu dandeenya, akkaataan iddoowwan akka gabatee man'eetti akka hin dhaalamne mirkaneessuu, fi qindeessaa Sass booda qaamolee Bootstrap irra deebiin akkaataa bu'uuraa fi dheeressuu tokko tokko hayyamuu dandeenya.

Akkaataa jijjiiramoota CSS itti fayyadamnu hubannoo tokko tokkoof galmee gabatee keenya ilaali .

Akkasumas jijjiiramoota CSS giiridii keenya hunda keessatti fayyadamaa jirra-duratti guttersiif-itti fayyadamni qaamolee dabalataa gara fuulduraatti dhufaa jira.

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.