тағирёбандаҳои CSS

Bootstrap тақрибан ду даҳҳо хосиятҳои фармоишии CSS (тағйирёбандаҳо) -ро дар CSS-и тартибдодашуда дар бар мегирад ва даҳҳо дигар дар роҳи такмил додани мутобиқсозӣ дар асоси ҳар як ҷузъи. Инҳо дастрасии осонро ба арзишҳои маъмулан истифодашаванда, аз қабили рангҳои мавзӯъ, нуқтаҳо ва стекҳои асосии ҳуруфро ҳангоми кор дар нозири браузери шумо, қуттии код ё прототипсозии умумӣ таъмин мекунанд.

Ҳама хосиятҳои фармоишии мо бо префикс гузошта шудаандbs- , то ихтилофот бо CSS тарафи сеюмро пешгирӣ кунанд.

Тағйирёбандаҳои решавӣ

Инҳо тағирёбандаҳое мебошанд, ки мо дохил мекунем (дар хотир доред, ки :rootлозим аст), ки онҳоро дар ҳама ҷое, ки CSS-и Bootstrap бор карда шудааст, дастрас кардан мумкин аст. Онҳо дар _root.scssфайли мо ҷойгиранд ва ба файлҳои dist тартибдодашудаи мо дохил карда шудаанд.

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

Тағйирёбандаҳои компонент

Мо инчунин ба истифодаи хосиятҳои фармоишӣ ҳамчун тағирёбандаҳои маҳаллӣ барои ҷузъҳои гуногун шурӯъ мекунем. Бо ин роҳ мо метавонем CSS-и тартибдодаамонро кам кунем, кафолат диҳем, ки услубҳо дар ҷойҳое ба мисли ҷадвалҳои лонаӣ мерос нагиранд ва пас аз тартиб додани Sass баъзе барқарорсозӣ ва васеъ кардани ҷузъҳои Bootstrap имкон медиҳанд.

Барои фаҳмидани он, ки мо тағирёбандаҳои CSS-ро чӣ гуна истифода мебарем, ба ҳуҷҷатҳои ҷадвали мо нигаред .

Мо инчунин тағирёбандаҳои CSS-ро дар шабакаҳои худ истифода мебарем - пеш аз ҳама барои ҷӯйборҳо - бо истифодаи бештари ҷузъҳо дар оянда.

Мисолхо

Тағйирёбандаҳои CSS чандирии шабеҳро ба тағирёбандаҳои Sass пешниҳод мекунанд, аммо бидуни зарурати ҷамъоварӣ пеш аз он ки ба браузер хидмат расонанд. Масалан, дар ин ҷо мо шрифт ва услубҳои пайванди саҳифаи худро бо тағирёбандаҳои CSS аз нав танзим мекунем.

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