CSS විචල්යයන්

Bootstrap එහි සම්පාදනය කරන ලද CSS හි CSS අභිරුචි ගුණාංග දුසිම් දෙකක් පමණ (විචල්‍යයන්) ඇතුළත් වේ, එක් සංරචක පදනමක් මත වැඩිදියුණු කළ අභිරුචිකරණය සඳහා තවත් දුසිම් ගණනක් ඇත. ඔබේ බ්‍රවුසරයේ පරීක්ෂක, කේත වැලිපිල්ලක් හෝ සාමාන්‍ය මූලාකෘතියක් තුළ වැඩ කරන විට අපගේ තේමා වර්ණ, බිඳුම් ලක්ෂ්‍ය සහ ප්‍රාථමික අකුරු අට්ටි වැනි බහුලව භාවිතා වන අගයන් වෙත මේවා පහසු ප්‍රවේශයක් සපයයි.

bs-තෙවන පාර්ශ්ව CSS සමඟ ගැටුම් වළක්වා ගැනීම සඳහා අපගේ සියලු අභිරුචි ගුණාංග උපසර්ග කර ඇත.

මූල විචල්යයන්

:rootBootstrap හි CSS පූරණය වන ඕනෑම තැනකට ප්‍රවේශ විය හැකි අප ඇතුලත් කරන විචල්‍යයන් මෙන්න (අවශ්‍ය බව සලකන්න ). ඒවා අපගේ _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);
}