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

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

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-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --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-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, 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));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

اجزاء کے متغیرات

بوٹسٹریپ 5 تیزی سے اپنی مرضی کی خصوصیات کو مختلف اجزاء کے لیے مقامی متغیر کے طور پر استعمال کر رہا ہے۔ اس طرح ہم اپنے مرتب کردہ سی ایس ایس کو کم کرتے ہیں، اس بات کو یقینی بناتے ہیں کہ نیسٹڈ ٹیبلز جیسی جگہوں پر سٹائلز وراثت میں نہیں مل رہے ہیں، اور ساس کمپلیشن کے بعد بوٹسٹریپ کے اجزاء کو کچھ بنیادی ریسٹائلنگ اور توسیع کی اجازت دیتے ہیں۔

کچھ بصیرت کے لیے ہمارے ٹیبل دستاویزات پر ایک نظر ڈالیں کہ ہم کس طرح CSS متغیرات استعمال کر رہے ہیں ۔ ہمارے navbars v5.2.0 کے مطابق CSS متغیرات بھی استعمال کرتے ہیں۔ ہم اپنے گرڈز میں سی ایس ایس متغیرات بھی استعمال کر رہے ہیں—بنیادی طور پر نئے آپٹ ان سی ایس ایس گرڈ کے لیے— مستقبل میں مزید اجزاء کے استعمال کے ساتھ۔

جب بھی ممکن ہو، ہم بنیادی اجزاء کی سطح پر CSS متغیرات تفویض کریں گے (مثلاً، .navbarnavbar اور اس کے ذیلی اجزاء کے لیے)۔ اس سے اندازہ لگانا کم ہو جاتا ہے کہ کہاں اور کس طرح اپنی مرضی کے مطابق بنانا ہے، اور مستقبل کی اپ ڈیٹس میں ہماری ٹیم کو آسانی سے ترمیم کرنے کی اجازت دیتا ہے۔

سابقہ

زیادہ تر CSS متغیرات آپ کے اپنے کوڈ بیس کے ساتھ تصادم سے بچنے کے لیے ایک سابقہ ​​استعمال کرتے ہیں۔ یہ سابقہ ​​اس کے علاوہ ہے --جو ہر CSS متغیر پر درکار ہے۔

$prefixSass متغیر کے ذریعے سابقہ ​​کو حسب ضرورت بنائیں ۔ پہلے سے طے شدہ طور پر، یہ سیٹ ہے bs-(ٹریلنگ ڈیش کو نوٹ کریں)۔

مثالیں

سی ایس ایس متغیر Sass کے متغیرات کے لیے اسی طرح کی لچک پیش کرتے ہیں، لیکن براؤزر کو پیش کیے جانے سے پہلے تالیف کی ضرورت کے بغیر۔ مثال کے طور پر، یہاں ہم اپنے صفحہ کے فونٹ اور لنک اسٹائل کو CSS متغیرات کے ساتھ دوبارہ ترتیب دے رہے ہیں۔

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

گرڈ بریک پوائنٹس

جب کہ ہم اپنے گرڈ بریک پوائنٹس کو CSS متغیرات کے طور پر شامل کرتے ہیں (سوائے xs)، آگاہ رہیں کہ CSS متغیر میڈیا کے سوالات میں کام نہیں کرتے ۔ یہ متغیرات کے لیے CSS اسپیک میں ڈیزائن کے لحاظ سے ہے، لیکن آنے والے سالوں میں env()متغیرات کی حمایت کے ساتھ تبدیل ہو سکتا ہے۔ کچھ مددگار لنکس کے لیے اس اسٹیک اوور فلو جواب کو دیکھیں۔ اس دوران، آپ ان متغیرات کو دیگر CSS حالات کے ساتھ ساتھ اپنے JavaScript میں بھی استعمال کر سکتے ہیں۔