CSS masu canji

Bootstrap ya haɗa da yawancin kaddarorin al'ada na CSS (masu canzawa) a cikin CSS ɗin sa da aka haɗa don keɓancewa na ainihi ba tare da buƙatar sake tara Sass ba. Waɗannan suna ba da sauƙi ga dabi'un da aka saba amfani da su kamar launukan jigon mu, wuraren karyewa, da rigunan rubutu na farko lokacin aiki a cikin mai binciken burauzar ku, akwatin sandbox, ko ƙirar gabaɗaya.

Dukkan kaddarorin mu na al'ada an riga an sanyabs- su don guje wa rikici da CSS na ɓangare na uku.

Tushen masu canji

Anan akwai masu canji da muka haɗa (lura cewa :rootana buƙata) waɗanda za'a iya isa ga duk inda aka loda CSS na Bootstrap. Ana samun su a cikin _root.scssfayil ɗin mu kuma an haɗa su cikin fayilolin dist ɗinmu da aka haɗa.

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

Matsalolin sashi

Bootstrap 5 yana ƙara yin amfani da kaddarorin al'ada azaman masu canjin gida don sassa daban-daban. Ta wannan hanyar za mu rage CSS ɗinmu da aka haɗa, tabbatar da cewa ba a gaji salon ba a wurare kamar teburi masu gida, kuma muna ba da izinin sake gyarawa da haɓaka abubuwan Bootstrap bayan haɗawar Sass.

Dubi takaddun teburin mu don ƙarin haske kan yadda muke amfani da masu canjin CSS . Navbars ɗin mu kuma suna amfani da masu canjin CSS kamar na v5.2.0. Har ila yau, muna amfani da masu canjin CSS a cikin grid ɗin mu—musamman don gutters sabuwar hanyar shiga CSS grid - tare da ƙarin amfani da abubuwan da ke zuwa nan gaba.

A duk lokacin da zai yiwu, za mu sanya masu canji na CSS a matakin tushe (misali, .navbarna navbar da sauran sassan sa). Wannan yana rage hasashe kan inda da yadda ake keɓancewa, kuma yana ba da damar yin gyare-gyare cikin sauƙi ta ƙungiyarmu a cikin sabuntawa na gaba.

Prefix

Yawancin masu canjin CSS suna amfani da prefix don guje wa karo tare da lambar lambar ku. Wannan prefix ɗin kari ne ga --abin da ake buƙata akan kowane maɓalli na CSS.

Keɓance prefix ta hanyar $prefixcanjin Sass. Ta hanyar tsoho, an saita shi zuwa bs-(lura da dash ɗin da ke biyo baya).

Misalai

Masu canjin CSS suna ba da sassauci iri ɗaya ga masu canjin Sass, amma ba tare da buƙatar haɗawa ba kafin a ba da su ga mai lilo. Misali, a nan muna sake saita font na shafinmu da tsarin haɗin kai tare da masu canjin CSS.

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

Wuraren grid

Yayin da muke haɗa madaidaitan grid ɗin mu azaman masu canjin CSS (ban da xs), ku sani cewa masu canjin CSS ba sa aiki a cikin tambayoyin kafofin watsa labarai . Wannan ta ƙira ce a cikin ƙayyadaddun CSS don masu canji, amma yana iya canzawa a cikin shekaru masu zuwa tare da goyan bayan env()masu canji. Duba wannan Amsar Tarin Ruwa don wasu hanyoyin haɗin kai masu taimako. A halin yanzu, zaku iya amfani da waɗannan masu canji a wasu yanayin CSS, da kuma a cikin JavaScript ɗin ku.