CSS ভেরিয়েবল

CSS ভেরিয়েবল

var() ফাংশন সিএসএস বিন্যাসকে বিন্যাসকে যোগ করে।

CSS বিন্যাসকে DOM এর অ্যাক্সেস করতে পারে, যার ফলে আপনি স্থানীয় বা সার্বজনীন ক্ষেত্রের বিন্যাসকে তৈরি করতে পারেন, JavaScript ব্যবহার করে বিন্যাসকে সংশোধন করতে পারেন এবং মিডিয়া কিউয়াইজ ভিত্তিতে বিন্যাসকে সংশোধন করতে পারেন。

CSS বিন্যাসকে রঙ সম্পর্কে, একটি ভালো পদ্ধতি হল রঙগুলিকে বিন্যাসকে রেখে রাখা, যাতে একবারও কপি-পেস্ট না করেই আবার আবার রঙগুলিকে ব্যবহার করা যায়。

ক্লাসিক পদ্ধতি

নিম্নোক্ত উদাহরণটি স্টাইলস টেবিলে কিছু রঙ নির্ধারণের ক্লাসিক পদ্ধতির উদাহরণ (কোনো বিশেষ ইলেকট্রনকে রঙ নির্ধারণ করে):

প্রতীক্ষা

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  প্যাডিং: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  প্যাডিং: 5px;
}

আপনার নিজেই প্রয়োগ করুন

var() ফাংশনের সংজ্ঞা

var() ফাংশন সিএসএস বিন্যাসকে বিন্যাসকে যোগ করে।

var() ফাংশনের সংজ্ঞা নিম্নরূপ:

var(name, value)
বিন্যাস বর্ণনা
name বাধ্যতামূলক।বিন্যাসকে নাম (দুইটি সাব-ড্র্যাক এর (--) দিকে ভাবুন)
value বাধ্যতামূলক।পছন্দের বিকল্প (বিন্যাসকে পাওয়া যায় না তখন ব্যবহার করা হয়)

মন্তব্য:বিন্যাসকে নাম দিতে, দুইটি সাব-ড্র্যাক এর (--) দিকে ভাবুন এবং বৈধতা করুন!

var() কিভাবে কাজ করে

প্রথমত: CSS বিন্যাসকে সার্বজনীন বা স্থানীয় ক্ষেত্রের সহজেই পাওয়া যায়。

সার্বজনীন বিন্যাসকে সমগ্র ডকুমেন্টে অ্যাক্সেস/ব্যবহার করা যায়, কিন্তু স্থানীয় বিন্যাসকে শুধুমাত্র ঘোষণা করা সিলেক্টরের ভিতরেই ব্যবহার করা যায়。

যদি একটি সার্বজনীন ক্ষেত্রের বিন্যাসকে তৈরি করতে হয়, তবে :root সিলেক্টরে ঘোষণা করুন।:root সিলেক্টর ডকুমেন্টের মূল ইলেকট্রনকে মাত্রানীত করে।

যদি একটি স্থানীয় ক্ষেত্রের বিন্যাসকে তৈরি করতে হয়, তবে তা ব্যবহার করতে যেতে যে সিলেক্টরটিতে ঘোষণা করা হয়েছে তাতে ঘোষণা করুন。

এই উদাহরণটি উপরের উদাহরণটির সমতুল্য, কিন্তু এখানে var() ফাংশন ব্যবহার করা হয়েছে。

প্রথমে, আমরা দুইটি সার্বজনীন বিন্যাসকে ঘোষণা করি (--blue এবং --white)。এরপর, আমরা var() ফাংশন ব্যবহার করে স্টাইলস টেবিলে পরে বিন্যাসকে যোগ করি:

প্রতীক্ষা

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { বর্তন-তলার: 2px সলিড ভেরিয়েবল(--blue); }
.container {
  রঙ: var(--blue);
  ব্যাকগ্রাউন্ড-কালার: var(--white);
  প্যাডিং: 15px;
}
button {
  ব্যাকগ্রাউন্ড-কালার: var(--white);
  রঙ: var(--blue);
  বর্তন: 1px সলিড ভেরিয়েবল(--blue);
  প্যাডিং: 5px;
}

আপনার নিজেই প্রয়োগ করুন

var() এর এসব সুবিধা আছে:

  • কোডকে পড়া সহজ করে তোলা (বোঝা সহজ হয়)
  • সংশোধন করার রঙ সহজ করে তোলা

সবজাতীয় আকাশও সাদা এবং নীল রঙ সম্প্রসারিত করতে, আপনাকে শুধুমাত্র দুইটি বিন্যাসকে সংশোধন করতে হবে:

প্রতীক্ষা

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { বর্তন-তলার: 2px সলিড ভেরিয়েবল(--blue); }
.container {
  রঙ: var(--blue);
  ব্যাকগ্রাউন্ড-কালার: var(--white);
  প্যাডিং: 15px;
}
button {
  ব্যাকগ্রাউন্ড-কালার: var(--white);
  রঙ: var(--blue);
  বর্তন: 1px সলিড ভেরিয়েবল(--blue);
  প্যাডিং: 5px;
}

আপনার নিজেই প্রয়োগ করুন

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম ব্রাউজার এই প্রতিযোগিতা সমর্থন করে

ফাংশন
var() 49.0 15.0 31.0 9.1 36.0

CSS var() ফাংশন

ফাংশন বর্ণনা
var() CSS ভেরিয়েবলের মান জুড়িয়ে দিন