CSS চলকসমূহ

বুটষ্ট্ৰেপে ইয়াৰ কমপাইল কৰা CSS ত বহুতো CSS স্বনিৰ্বাচিত বৈশিষ্ট্য (চলকসমূহ) অন্তৰ্ভুক্ত কৰে বাস্তৱ-সময় স্বনিৰ্বাচনৰ বাবে Sass পুনৰায় কম্পাইল কৰাৰ প্ৰয়োজন নোহোৱাকৈ । এইবোৰে আপোনাৰ ব্ৰাউজাৰৰ পৰিদৰ্শক, এটা ক'ড ছেণ্ডবক্স, বা সাধাৰণ প্ৰ'ট'টাইপিঙত কাম কৰাৰ সময়ত আমাৰ থিম ৰং, ব্ৰেকপইণ্ট, আৰু প্ৰাথমিক ফন্ট ষ্টেকসমূহৰ দৰে সাধাৰণতে ব্যৱহৃত মানসমূহলৈ সহজ অভিগম প্ৰদান কৰে।

আমাৰ সকলো কাষ্টম বৈশিষ্ট্যbs- তৃতীয় পক্ষৰ CSS ৰ সৈতে সংঘাত এৰাই চলিবলৈ উপসৰ্গ কৰা হৈছে।

মূল চলকসমূহ

ইয়াত আমি অন্তৰ্ভুক্ত কৰা চলকসমূহ আছে (মন কৰিব যে :rootপ্ৰয়োজনীয়) যি Bootstrap ৰ 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-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;
}

উপাদান চলকসমূহ

বুটষ্ট্ৰেপ ৫ এ বিভিন্ন উপাদানসমূহৰ বাবে স্থানীয় চলক হিচাপে স্বনিৰ্বাচিত বৈশিষ্ট্যসমূহ ক্ৰমান্বয়ে ব্যৱহাৰ কৰি আছে। এই ধৰণে আমি আমাৰ কমপাইল কৰা CSS হ্ৰাস কৰো, নেষ্টেড টেবুলসমূহৰ দৰে স্থানত শৈলীসমূহ উত্তৰাধিকাৰী নহয় সুনিশ্চিত কৰোঁ, আৰু Sass কমপাইলেচনৰ পিছত Bootstrap উপাদানসমূহৰ কিছুমান মূল পুনৰষ্টাইল আৰু সম্প্ৰসাৰণৰ অনুমতি দিওঁ।

আমি CSS চলকসমূহ কেনেকৈ ব্যৱহাৰ কৰিছো তাৰ কিছু অন্তৰ্দৃষ্টিৰ বাবে আমাৰ টেবুল নথিপত্ৰ চাওক । আমাৰ navbars সমূহে v5.2.0 ৰ CSS চলকসমূহো ব্যৱহাৰ কৰে। আমি আমাৰ গ্ৰীডসমূহত CSS চলকসমূহো ব্যৱহাৰ কৰিছো—প্ৰাথমিকভাৱে নতুন অপ্ট-ইন CSS গ্ৰীড গটাৰসমূহৰ বাবে—ভৱিষ্যতে অধিক উপাদান ব্যৱহাৰ আহিব।

যেতিয়াই সম্ভৱ, আমি ভিত্তি উপাদান স্তৰত CSS চলকসমূহ নিযুক্ত কৰিম (যেনে, .navbarnavbar আৰু ইয়াৰ উপ-উপাদানসমূহৰ বাবে)। ই ক'ত আৰু কেনেকৈ কাষ্টমাইজ কৰিব লাগে তাৰ অনুমান হ্ৰাস কৰে, আৰু ভৱিষ্যতৰ আপডেটসমূহত আমাৰ দলৰ দ্বাৰা সহজ পৰিৱৰ্তনৰ অনুমতি দিয়ে।

উপসৰ্গ

আপোনাৰ নিজৰ ক'ডবেছৰ সৈতে সংঘৰ্ষ এৰাই চলিবলৈ বেছিভাগ CSS চলকসমূহে এটা উপসৰ্গ ব্যৱহাৰ কৰে। এই উপসৰ্গটো --প্ৰতিটো CSS চলকত প্ৰয়োজনীয় ৰ অতিৰিক্ত।

$prefixSass চলকৰ যোগেদি উপসৰ্গটো কাষ্টমাইজ কৰক । অবিকল্পিতভাৱে, ইয়াক bs-(পৰৱৰ্তী ডেছ মন কৰক) লে সংহতি কৰা হৈছে।

উদাহৰণ

CSS চলকসমূহে Sass ৰ চলকসমূহৰ সৈতে একেধৰণৰ নমনীয়তা প্ৰদান কৰে, কিন্তু ব্ৰাউজাৰলৈ সেৱা আগবঢ়োৱাৰ আগতে কম্পাইলেচনৰ প্ৰয়োজন নোহোৱাকৈ। উদাহৰণস্বৰূপে, ইয়াত আমি আমাৰ পৃষ্ঠাৰ ফন্ট আৰু লিংক শৈলীসমূহ CSS ভেৰিয়েবলসমূহৰ সৈতে ৰিছেট কৰিছো।

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

গ্ৰীড ব্ৰেকপইন্ট

আমি আমাৰ গ্ৰীড ব্ৰেকপইন্টসমূহক CSS চলক হিচাপে অন্তৰ্ভুক্ত কৰাৰ সময়ত (ৰ বাহিৰে xs), সচেতন হওক যে CSS চলকসমূহে মিডিয়া প্ৰশ্নসমূহত কাম নকৰে । এইটো চলকসমূহৰ বাবে CSS spec ত ডিজাইনৰ দ্বাৰা কৰা হৈছে, কিন্তু চলকসমূহৰ বাবে সমৰ্থনৰ সৈতে আগন্তুক বছৰসমূহত সলনি হ'ব পাৰে env()। কিছুমান সহায়ক সংযোগৰ বাবে এই ষ্টেক অভাৰফ্ল' উত্তৰ চাওক । ইয়াৰ মাজতে, আপুনি এই চলকসমূহ অন্য CSS পৰিস্থিতিত ব্যৱহাৰ কৰিব পাৰে, লগতে আপোনাৰ জাভাস্ক্রিপ্টত।