CSS aldagaiak

Bootstrap -ek CSS propietate pertsonalizatu (aldagai) asko biltzen ditu konpilatutako CSS-n denbora errealean pertsonalizatzeko Sass berriro konpilatu beharrik gabe. 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-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;
}

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

Sarearen eten-puntuak

Gure sareko eten-puntuak CSS aldagai gisa sartzen ditugun arren (salbu xs), kontuan izan CSS aldagaiek ez dutela funtzionatzen multimedia-kontsultetan . Hau aldagaien CSS zehaztapenean diseinatuta dago, baina aldagaien laguntzarekin datozen urteetan alda daiteke env(). Begiratu Stack Overflow erantzun hau esteka lagungarri batzuetarako. Bitartean, aldagai hauek beste CSS egoera batzuetan erabil ditzakezu, baita zure JavaScript-ean ere.