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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Osagaien aldagaiak

Bootstrap 5 gero eta gehiago erabiltzen ari da propietate pertsonalizatuak hainbat osagairen tokiko aldagai gisa. Modu honetan, konpilatutako CSS murrizten dugu, estiloak habiaratutako taulak bezalako lekuetan heredatzen ez direla ziurtatzen dugu eta Sass konpilatu ondoren Bootstrap osagaien oinarrizko berregokitzea eta hedatzea ahalbidetzen dugu.

Begiratu gure taulako dokumentazioa CSS aldagaiak nola erabiltzen ari garen jakiteko . Gure nabigazio- barrek CSS aldagaiak ere erabiltzen dituzte v5.2.0-tik aurrera. Gure sareetan CSS aldagaiak ere erabiltzen ari gara —batez ere CSS sare berria aukeratzeko aukeran murrizteko—, etorkizunean osagaien erabilera gehiago izango baita.

Ahal den guztietan, CSS aldagaiak esleituko ditugu oinarrizko osagaien mailan (adibidez, .navbarnavbar eta bere azpiosagaietarako). Horrek non eta nola pertsonalizatu asmatzea murrizten du, eta gure taldeak etorkizuneko eguneraketetan aldaketa errazak egiteko aukera ematen du.

Aurrizkia

CSS aldagai gehienek aurrizki bat erabiltzen dute zure kode-basearekin talkak saihesteko. Aurrizki hau --CSS aldagai guztietan behar den osagarria da.

Pertsonalizatu aurrizkia $prefixSass aldagaiaren bidez. Lehenespenez, ezarrita dago bs-(kontuan izan amaierako marra).

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.