CSS айнымалылары

Bootstrap компиляцияланған CSS-де шамамен екі ондаған CSS теңшелетін сипаттарды (айнымалылар) қамтиды , одан басқа ондаған құрамдас бөлік негізінде жақсарту үшін теңшеу жолында. Бұл шолғыштың инспекторында, код құм жәшігінде немесе жалпы прототипте жұмыс істегенде тақырып түстері, тоқтау нүктелері және негізгі қаріп стектері сияқты жиі қолданылатын мәндерге оңай қол жеткізуді қамтамасыз етеді.

Біздің барлық реттелетін сипаттарымызbs- үшінші тарап CSS-мен қайшылықтарды болдырмау үшін префикспен берілген.

Түбір айнымалылар

:rootМұнда біз Bootstrap CSS жүктелген кез келген жерден қол жеткізуге болатын айнымалы мәндерді қосамыз (қажет екенін ескеріңіз ). Олар біздің _root.scssфайлда орналасқан және біздің құрастырылған дист файлдарымызға енгізілген.

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