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

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

Ҳама хосиятҳои фармоишии мо бо префикс гузошта шудаанд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-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;
}

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

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

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

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

Мисолхо

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

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

Нуқтаҳои шикастани шабака

Ҳангоме ки мо нуқтаҳои шикастани шабакаи худро ҳамчун тағирёбандаҳои CSS дохил мекунем (ба истиснои xs), бидонед, ки тағирёбандаҳои CSS дар дархостҳои медиа кор намекунанд . Ин аз рӯи тарҳрезӣ дар мушаххасоти CSS барои тағирёбандаҳо аст, аммо метавонад дар солҳои оянда бо дастгирии env()тағирёбандаҳо тағир ёбад. Барои якчанд истинодҳои муфид ин ҷавоби Stack Overflow -ро санҷед. Дар айни замон, шумо метавонед ин тағирёбандаҳоро дар дигар ҳолатҳои CSS ва инчунин дар JavaScript-и худ истифода баред.