Zosintha za CSS

Bootstrap imaphatikizapo pafupifupi magawo awiri a CSS makonda (zosinthika) mu CSS yake yopangidwa, ndi zina zambiri panjira yopititsira patsogolo makonda pagawo lililonse. Izi zimapereka mwayi wosavuta kuzinthu zomwe zimagwiritsidwa ntchito nthawi zambiri monga mitundu yathu yamutu, zodulira, ndi milu ya zilembo zoyambirira mukamagwira ntchito yoyang'anira msakatuli wanu, bokosi la sandbox, kapena ma prototyping wamba.

Makhalidwe athu onse amapangidwabs- kuti apewe mikangano ndi CSS yachitatu.

Zosintha za mizu

Nawa zosintha zomwe timaphatikiza (zindikirani kuti :rootndizofunikira) zomwe zitha kupezeka kulikonse komwe Bootstrap's CSS yadzaza. Zili mufayilo yathu _root.scssndipo zikuphatikizidwa m'mafayilo athu opangidwa ndi 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));
}

Zosintha zamagulu

Tayambanso kugwiritsa ntchito zinthu zachikhalidwe monga zosinthika zapamalo pazigawo zosiyanasiyana. Mwanjira iyi titha kuchepetsa CSS yathu yopangidwa, kuwonetsetsa kuti masitayelo satengera malo ngati matebulo okhala ndi zisa, ndikuloleza kukonzanso ndikukulitsa zida za Bootstrap pambuyo pophatikiza Sass.

Yang'anani pa tebulo lathu zolembedwa kuti muzindikire momwe timagwiritsira ntchito zosintha za CSS .

Tikugwiritsanso ntchito zosintha za CSS pama gridi athu - makamaka ma gutters - ndikugwiritsa ntchito zina zambiri mtsogolo.

Zitsanzo

Zosintha za CSS zimapereka kusinthasintha kofanana ndi zosintha za Sass, koma popanda kufunika kophatikiza musanatumizidwe kwa osatsegula. Mwachitsanzo, apa tikukhazikitsanso mafonti atsamba lathu ndi masitayelo olumikizirana ndi CSS.

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