CSS zvakasiyana

Bootstrap inosanganisira anosvika gumi nemaviri eCSS tsika zvivakwa (zvinosiyana) mune yayo yakaunganidzwa CSS, ine akawanda akawanda munzira yekuvandudza maitiro pane-chimwe chinhu. Izvi zvinopa nyore kuwana kune anowanzo shandiswa kukosha senge yedu dingindira mavara, mabreakpoints, uye ekutanga font stacks paunenge uchishanda mubrowser yako inspector, kodhi sandbox, kana general prototyping.

Yese yedu tsika zvivakwa prefixedbs- nekudzivirira kunetsana nevechitatu bato CSS.

Root variables

Heano mavhezheni atinosanganisa (ona kuti izvo :rootzvinodiwa) zvinogona kuwanikwa chero kupi Bootstrap's CSS yakarodha. Iwo ari _root.scssmufaira redu uye anosanganisirwa mune edu akanyorwa dist mafaera.

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

Component variables

Isu tave kutangawo kushandisa zvivakwa zvetsika sezvimiro zvenzvimbo kune akasiyana mazvikamu. Nenzira iyi tinogona kudzikisa yedu yakaunganidzwa CSS, ive nechokwadi kuti masitaera haagarwe munzvimbo dzakaita sematafura akaiswa matendere, uye kubvumira kumwe kugadziridza zvakare uye kuwedzera kweBootstrap zvikamu mushure meSass kuunganidzwa.

Tarisa uone zvinyorwa zvetafura yedu kuti uwane nzwisiso yemashandisiro atinoita CSS zvinosiyana .

Isu tiri kushandisawo maCSS akasiyana pane edu magridi-kunyanya kumagita-nekuwedzera kwechikamu kushandiswa kuri kuuya mune ramangwana.

Mienzaniso

CSS zvinosiyana zvinopa kuchinjika kwakafanana kune maSass akasiyana, asi pasina kudikanwa kwekubatanidza isati yapihwa kune browser. Semuenzaniso, pano tiri kusetazve mafonti epeji redu uye masitaera ekubatanidza ane CSS zvinosiyana.

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