CSS aldagaiak

Bootstrap-ek bi dozena bat CSS propietate pertsonalizatu (aldagai) biltzen ditu bere CSS konpilatuan, eta beste dozenaka osagairen arabera pertsonalizatzeko bidean daude. Hauek sarbide erraza eskaintzen dute gure gaiaren koloreak, eten-puntuak eta letra-tipo pila nagusietara, hala nola, arakatzailearen ikuskatzailean, kode-kutxa batean edo prototipo orokorrean lan egiten duzunean.

Gure propietate pertsonalizatu guztiek aurrizkia dutebs- hirugarrenen CSSekin gatazkak ekiditeko.

Erro aldagaiak

Hona hemen sartzen ditugun aldagaiak (kontuan izan :rootbehar dela) Bootstrap-en CSS kargatzen den edozein lekutan atzi daitezkeen. Gure _root.scssfitxategian daude eta konpilatutako dist fitxategietan sartzen dira.

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

Osagaien aldagaiak

Gainera, propietate pertsonalizatuak hainbat osagairen aldagai lokal gisa erabiltzen hasi gara. Modu honetan, konpilatutako CSS murriztu dezakegu, estiloak habiaratuta bezalako tokietan ez direla bermatu eta Sass konpilatu ondoren Bootstrap osagaiak oinarrizko berregokitzea eta hedatzea ahalbidetuko dugu.

Begiratu gure taulako dokumentazioa CSS aldagaiak nola erabiltzen ari garen jakiteko .

Gure sareetan CSS aldagaiak ere erabiltzen ari gara —batez ere erretenetarako— etorkizunean osagaien erabilera gehiago izango baita.

Adibideak

CSS aldagaiek Sassen aldagaien antzeko malgutasuna eskaintzen dute, baina arakatzaileari zerbitzatu aurretik konpilazio beharrik gabe. Adibidez, hemen gure orriaren letra-tipoa eta esteka estiloak CSS aldagaiekin berrezartzen ari gara.

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