CSS వేరియబుల్స్

బూట్‌స్ట్రాప్ దాని సంకలనం చేయబడిన CSSలో దాదాపు రెండు డజన్ల CSS కస్టమ్ ప్రాపర్టీలను (వేరియబుల్స్) కలిగి ఉంది, ఒక్కో భాగం ఆధారంగా మెరుగైన అనుకూలీకరణ కోసం డజన్ల కొద్దీ మరిన్ని మార్గంలో ఉన్నాయి. ఇవి మీ బ్రౌజర్ ఇన్‌స్పెక్టర్, కోడ్ శాండ్‌బాక్స్ లేదా సాధారణ ప్రోటోటైపింగ్‌లో పని చేస్తున్నప్పుడు మా థీమ్ రంగులు, బ్రేక్‌పాయింట్‌లు మరియు ప్రాథమిక ఫాంట్ స్టాక్‌లు వంటి సాధారణంగా ఉపయోగించే విలువలకు సులభమైన యాక్సెస్‌ను అందిస్తాయి.

bs-మూడవ పక్షం CSSతో వైరుధ్యాలను నివారించడానికి మా అనుకూల లక్షణాలన్నీ ఉపసర్గ చేయబడ్డాయి .

రూట్ వేరియబుల్స్

:rootబూట్‌స్ట్రాప్ యొక్క 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 సంకలనం తర్వాత బూట్‌స్ట్రాప్ భాగాలను కొన్ని ప్రాథమిక రీస్టైలింగ్ మరియు పొడిగింపును అనుమతించవచ్చు.

మేము CSS వేరియబుల్స్‌ని ఎలా ఉపయోగిస్తున్నాము అనే దాని గురించి కొంత అంతర్దృష్టి కోసం మా టేబుల్ డాక్యుమెంటేషన్‌ను చూడండి .

మేము మా గ్రిడ్‌ల అంతటా CSS వేరియబుల్స్‌ని కూడా ఉపయోగిస్తున్నాము—ప్రధానంగా గట్టర్‌ల కోసం—భవిష్యత్తులో మరిన్ని కాంపోనెంట్ వినియోగం వస్తుంది.

ఉదాహరణలు

CSS వేరియబుల్స్ Sass యొక్క వేరియబుల్స్‌కు సమానమైన సౌలభ్యాన్ని అందిస్తాయి, అయితే బ్రౌజర్‌కి అందించడానికి ముందు సంకలనం అవసరం లేకుండా. ఉదాహరణకు, ఇక్కడ మేము CSS వేరియబుల్స్‌తో మా పేజీ ఫాంట్ మరియు లింక్ స్టైల్‌లను రీసెట్ చేస్తున్నాము.

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