CSS ভেরিয়েবল

বুটস্ট্র্যাপ তার সংকলিত 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 কমাতে পারি, নিশ্চিত করতে পারি যে স্টাইলগুলি নেস্টেড টেবিলের মতো জায়গায় উত্তরাধিকারসূত্রে পাওয়া যায় না, এবং Sass সংকলনের পরে বুটস্ট্র্যাপ উপাদানগুলির কিছু মৌলিক পুনঃস্থাপন এবং প্রসারিত করার অনুমতি দিতে পারি।

আমরা কিভাবে CSS ভেরিয়েবল ব্যবহার করছি তার কিছু অন্তর্দৃষ্টির জন্য আমাদের টেবিল ডকুমেন্টেশন দেখুন ।

আমরা আমাদের গ্রিড জুড়ে সিএসএস ভেরিয়েবল ব্যবহার করছি - প্রাথমিকভাবে গটারগুলির জন্য - ভবিষ্যতে আরও উপাদান ব্যবহারের সাথে।

উদাহরণ

CSS ভেরিয়েবলগুলি Sass এর ভেরিয়েবলের অনুরূপ নমনীয়তা প্রদান করে, কিন্তু ব্রাউজারে পরিবেশন করার আগে সংকলনের প্রয়োজন ছাড়াই। উদাহরণস্বরূপ, এখানে আমরা CSS ভেরিয়েবলের সাথে আমাদের পৃষ্ঠার ফন্ট এবং লিঙ্ক শৈলী রিসেট করছি।

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