CSS متغير

بوٽ اسٽريپ پنهنجي مرتب ڪيل 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 کي گهٽائي سگهون ٿا، يقيني بڻائي سگهون ٿا ته اسٽائل وراثت ۾ نه آهن جڳهن ۾ nested جدولن، ۽ اجازت ڏيو ڪجهه بنيادي بحالي ۽ بوٽ اسٽريپ اجزاء کي وڌائڻ ۽ ساس گڏ ڪرڻ کان پوءِ.

اسان جي ٽيبل دستاويزن تي هڪ نظر وٺو ڪجهه بصيرت لاءِ ته اسان ڪيئن CSS متغير استعمال ڪري رهيا آهيون .

اسان پڻ استعمال ڪري رهيا آهيون CSS متغير اسان جي گرڊن ۾ - بنيادي طور تي گٽرن لاءِ- مستقبل ۾ وڌيڪ اجزاء جي استعمال سان.

مثال

CSS متغير Sass جي متغيرن لاءِ ساڳي لچڪ پيش ڪن ٿا، پر برائوزر کي پيش ڪرڻ کان اڳ تاليف جي ضرورت کان سواءِ. مثال طور، هتي اسان پنهنجي صفحي جي فونٽ ۽ لنڪ اسلوب کي CSS متغيرن سان ري سيٽ ڪري رهيا آهيون.

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