CSS masu canji

Bootstrap ya ƙunshi kusan dozin biyu na kaddarorin al'ada na CSS (masu canzawa) a cikin CSS ɗin sa da aka haɗa, tare da ƙari da yawa akan hanya don ingantaccen gyare-gyare akan kowane bangare. 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-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --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-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));
}

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