тағирёбандаҳои 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-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;
}

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

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

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

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

Префикс

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

Префиксро тавассути $prefixтағирёбандаи Sass фармоиш диҳед. Бо нобаёнӣ, он ба танзим гузошта шудааст bs-(тире пасро қайд кунед).

Мисолхо

Тағйирёбандаҳои 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-и худ истифода баред.