سی ایس ایس متغیرات

بوٹسٹریپ اپنے مرتب کردہ سی ایس ایس میں تقریباً دو درجن CSS کسٹم پراپرٹیز (متغیرات) کو شامل کرتا ہے، جس میں فی جزو کی بنیاد پر بہتر تخصیص کی راہ میں درجنوں مزید ہیں۔ یہ آپ کے براؤزر کے انسپکٹر، کوڈ سینڈ باکس، یا عام پروٹو ٹائپنگ میں کام کرتے وقت ہمارے تھیم کے رنگ، بریک پوائنٹس، اور بنیادی فونٹ اسٹیک جیسی عام استعمال شدہ اقدار تک آسان رسائی فراہم کرتے ہیں۔

bs-فریق ثالث CSS کے ساتھ تنازعات سے بچنے کے لیے ہماری تمام حسب ضرورت خصوصیات کے ساتھ سابقہ ​​لگایا گیا ہے۔

روٹ متغیرات

یہاں وہ متغیرات ہیں جن کو ہم شامل کرتے ہیں (نوٹ کریں کہ :rootمطلوبہ ہے) جو بوٹسٹریپ کے سی ایس ایس کو لوڈ ہونے پر کہیں بھی رسائی حاصل کی جا سکتی ہے۔ وہ ہماری _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 متغیرات کے ساتھ دوبارہ ترتیب دے رہے ہیں۔

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