CSS ভেরিয়েবল

বুটস্ট্র্যাপ Sass পুনরায় কম্পাইল করার প্রয়োজন ছাড়াই রিয়েল-টাইম কাস্টমাইজেশনের জন্য তার সংকলিত 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-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", 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));
  --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;
}

কম্পোনেন্ট ভেরিয়েবল

আমরা বিভিন্ন উপাদানের জন্য স্থানীয় ভেরিয়েবল হিসাবে কাস্টম বৈশিষ্ট্য ব্যবহার করতে শুরু করছি। এইভাবে আমরা আমাদের কম্পাইল করা CSS কমাতে পারি, নিশ্চিত করতে পারি যে স্টাইলগুলি নেস্টেড টেবিলের মতো জায়গায় উত্তরাধিকারসূত্রে পাওয়া যায় না, এবং Sass সংকলনের পরে বুটস্ট্র্যাপ উপাদানগুলির কিছু মৌলিক পুনঃস্থাপন এবং প্রসারিত করার অনুমতি দিতে পারি।

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

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

উদাহরণ

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

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

গ্রিড ব্রেকপয়েন্ট

যখন আমরা আমাদের গ্রিড ব্রেকপয়েন্টগুলিকে CSS ভেরিয়েবল হিসাবে অন্তর্ভুক্ত করি (ব্যতীত xs), তখন সচেতন থাকুন যে CSS ভেরিয়েবলগুলি মিডিয়া কোয়েরিতে কাজ করে না । এটি ভেরিয়েবলের জন্য CSS স্পেকের ডিজাইন অনুসারে, তবে ভেরিয়েবলের সমর্থনে আগামী বছরগুলিতে পরিবর্তন হতে পারে env()। কিছু সহায়ক লিঙ্কের জন্য এই স্ট্যাক ওভারফ্লো উত্তরটি দেখুন । এই সময়ের মধ্যে, আপনি এই ভেরিয়েবলগুলি অন্যান্য CSS পরিস্থিতিতে, সেইসাথে আপনার জাভাস্ক্রিপ্টে ব্যবহার করতে পারেন।