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ƙatar) 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-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;
}

Matsalolin sashi

Har ila yau, mun fara amfani da kaddarorin al'ada azaman masu canjin gida don sassa daban-daban. Ta wannan hanyar za mu iya rage CSS ɗinmu da aka haɗa, tabbatar da cewa ba a gaji salon ba a wurare kamar teburi masu gida, kuma mu 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 .

Har ila yau, muna amfani da masu canji na CSS a ko'ina cikin grid ɗinmu - musamman don magudanar ruwa - tare da ƙarin amfani da abubuwan da ke zuwa nan gaba.

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 ɗinku.