Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS3

কাস্টম সিএসেস প্রপার্টিসমূহঃ ভ্যারিয়েবলস

by
Read Time:5 minsLanguages:

Bengali (বাংলা) translation by Arnab Wahid (you can also view the original English article)

প্রতিটি প্রোগ্রামিং ল্যাঙ্গুয়েজেই ভ্যারিয়েবলের ব্যবহার হয়, কারণ ভ্যারিয়েবলের কাজ প্রতিটি ল্যাঙ্গুয়েজেই আছে। ভ্যারিয়েবলে মান স্টোর করা হয়, পরবর্তীতে সেটি ব্যবহার বা করার জন্য, বার বার ব্যবহারের সময় রিপিটেশন এড়াতে। সিএসেস প্রোগ্রামিং ল্যাঙ্গুয়েজ না হলেও, এতে সীমিত পরিসরে ভ্যায়েবলের ব্যবহার করা হয়।

সম্প্রতি সিএসএস এর নেটিভ ভ্যারিয়েবল ব্যবহার করা শুরু হয়েছে, প্রিপ্রসেসর ভ্যারিয়েল থেকে এগুলা কিভাবে ভিন্ন তা আমি আলোচনা করতে চাই

কাস্টম প্রপার্টিজ এর সুবিধাসমূহ

কাস্টম ভ্যারিয়েবল প্রপার্টিজ এর সিনট্যাক্স সুবিধার না, এবং অনেকের কাছে এটি কুৎসিত মনে হয়। আর স্যাস ভ্যারিয়েবল আগে থেকেই আমাদের ব্যবহারে থাকার কারণে অনেকেই নেটিভ ভ্যারিয়েবল ব্যবহার করতে চান না।

কিন্তু স্যাসের মত প্রিপ্রসেসর ভ্যারিয়েবলের ব্যবহারও অনেক সীমাবদ্ধ। এটা আমরা পরবর্তী সেকশনে আলোচনা করব।

মিডিয়া কুয়্যেরি দিয়ে প্রিপ্রসেসর ভ্যারিয়েবল আপডেট করা যায়না। রেসপনসিভ সাইটের জন্য, ভ্যারিয়েবলের ভ্যালু স্ক্রিন ডাইমেনশনের উপর ভিত্তি করে পরিবর্তন করতে হয়। প্রিপ্রসেসর ভ্যারিয়েবল তা করতে পারে না। উদাহরণের জন্য, নিচের কোডটি দেখুনঃ

কম্পাইল হওয়ার পর যা হবেঃ

এখানে মিডইয়া কুয়্যেরি সম্পূর্ণ অগ্রাহ্য করা হয়েছে। কিন্তু সিএসএস এ কিন্তু এটি অগ্রাহ্য করা হয় না।

প্রিপ্রসেসর ভ্যারিয়েবলগুলো ক্যাসকেড বা ইনহেরিট হয়না। কিন্তু নেটিভ ভ্যারিয়েভল ব্যবহার করে এই সীমাবদ্ধতা এড়ানো সম্ভব। আর নেটিভ ভ্যারিয়েবলের আরেকটি সুবিধা হচ্ছে, এর মান ইন্টারচেঞ্জেবল। স্যাস ভেরিয়েবল শুরু স্যাসেই কাজ করে। নেটিভ ভ্যারিয়েবল সকল প্রিপ্রসেসর সহ, প্লেইন সিএসএস ফাইলের সাথেও কাজ করে।

সিনট্যাক্স ও ব্যবহার

আসুন একটি সাধারণ উদাহরণ দিয়ে শুরু করা যাকঃ

কাস্টম প্রপার্টি ডিফাইন করতে, সবসময় একটি স্কোপ দিয়ে শুরু করতে হয়। স্কোপ ডম নোড বাছাই করে, যেখানে কাস্টম প্রপার্টি এভেইলেবল থাকবে। ব্যবহারঃ root দিয়ে বোঝা যায় যে সকল ইলিমেন্টে কাস্টম প্রপার্টি টি এভেইলেবল। মনে রাখতে হবে, কাস্টম প্রপার্টি দুটি ড্যাশ দিয়ে শুরু হয়।

কাস্টম প্রপার্টি ব্যবহার করতে চাইলে var() ফাংশন টি মনে রাখা উচিৎ। এই ফাংশনে দুটি আর্গুমেন্ট আছে। প্রথমটি হচ্ছে কাস্টম প্রপার্টি, দ্বিতীয়টি হচ্ছে ফলব্যাক ভ্যালু। কাস্টম প্রপার্টি কোন কারণে ব্যবহার করা না গেলে, তার পরিবর্তে একটি সেইফ ফলব্যাক ভ্যালু ব্যবহার করা হয়।

কাস্টম প্রপার্টিগুলো কেস সেন্সেটিভ। এর মানে --text-color , --Text-Color, এবং --text-Color এর মান সম্পূর্ণ ডিফারেন্ট।

var() ব্যবহারের সময় আরও কিছু জিনিষ মাথায় রাখতে হবেঃ

প্রথমত, ফলব্যাক ভ্যালু কমা দিয়ে সেপারেট করা যায়, আর শর্টহ্যান্ড ভ্যালু, যেমন মার্জিন, তখন ভ্যালু কমা দিয়ে সেপারেট করা লাগবে না। উদাহরণস্বরূপ, var(--para-font-family, "Lato", "Roboto"); তে ফলব্যহাক ভ্যালু হচ্ছে "Lato" "Roboto"; আবার, বর্ডার প্রপার্টির জন্য ফলব্যাক ভ্যালু এমনঃ

দ্বিতীয়ত, ভ্যারিয়েবল প্রপার্টি নেম হিসেসে ব্যবহার করা যাবে না। তাহলে কোড সেকেন্ড ডেক্লেরেশনে এরর দিবে।

Calc() ফাংশন দিয়ে ভ্যালু সেট করা

আসুন দেখে নেই কিভাবে কাস্টম প্রপার্টি থেকে ভ্যালু বিল্ড করতে হয়। অনেক খালি ভ্যারিয়েবল সেট করলে, পরে সেগুলায় ভ্যালিড ভ্যালু বসানো যায় না। নিচের কোড আসলে ইনভ্যালিডঃ

ফাইনাল সিএসএস ভ্যালু ক্যালকুলেট করে বিল্ড করতে calc() ফাংশন ব্যবহার করতে হবে। কোড ফাংশনাল করতে স্মান্য মডিফাই করে নিতে হবেঃ

হিসেবে কিন্তু আমরা শুধু px ইউনিটে সীমাবন্ধ না। সিএসএস এ এভেইলেবল সব ইউনিট আমরা ব্যবহার করতে পারি।

জাভাস্ক্রিপ্টের সাথে ভ্যারিয়েবল ব্যবহার

নেটিভ সিএসএস ভ্যারিয়েবল জাভাস্ক্রিপ্টের সাথে ইন্টার‍্যাক্ট করে ব্যবহার করা যায়। ভ্যালু পেতে নিচের কোড ব্যবহার করুনঃ

trim() ফাংশন ভ্যালুর উভয় দিক থেকে হোয়াইটস্পেস রিমুভ করবে।

কাস্টম প্রপার্টি সেট করতে setProperty() মেথড সেট করতে হবে।

এখন --background ভারিয়েবলটি ব্ল্যাক সেট করা। var() ব্যবহারে একটি কাস্টম প্রপারটি সেট করতে হবে।

উপরের স্টেটমেন্ট এই ভ্যালু --h-color equal to --p-color সেট করে, যেটা সম্পূর্ণ ভ্যালিড।

থিম ডাইনালিক্যালি চেঞ্জ করা

ইউজারের প্রেফারেন্স অনুযায়ী থিম চেঞ্জ করা ভ্যারিয়েবলের জন্য অনেক ফ্লেক্সিবল। আগে ইনলাইন স্টাইলিং বা মাল্টিপল স্টাইলশিট ব্যবহার করা ছাড়া অন্য উপায় ছিলো না। দুটাই অনেক সমস্যাবহূল মেথড। মাল্টিপল স্টাইলশিট ব্যবহার করা একটা ঝামেলা, আর ইনলাইন স্টাইল ব্যবহার করা ব্যাড প্র্যাকটিস। ভ্যারিয়েবল দিয়ে এই সমস্যা সহজেই সমাধান করা যায়। এই জাভাস্ক্রিপ্টের সাহায্যে থিম ডায়নামিক্যালি চেঞ্জ করা যায়ঃ

এই কোড একটি বাটনের মাধ্যমে এটাচ করে নিয়ে থিম বাটন হিসেবে ব্যবহার করা যায়। কেউ বাটনে ক্লিক করলেই greenTheme() ফাংশনের সব ভ্যালু ভ্যারিয়েবলে সেট হবে, আর পুরো থিম চেঞ্জ হয়ে যাবে। তো দেখা যাচ্ছে, আগের দুই পদ্ধতি থেকে, এই পদ্ধতি অনেক সহজ।

আপনি আরও বেশি ভ্যারিয়েবল অ্যাড করে আরেকটি থিম বানাতে পারেন। যেমন, this CodePen demo.

শেষ চিন্তা

এই টিউটোরিয়াল পড়ে মনে হতে পারে যে নেটিভ ভ্যারিয়েবল, স্যাসের মত প্রিপ্রসেসর ভ্যারিয়েবলের চেয়ে বেশি ভালো, কিন্তু আমি প্রিপ্রসেসরের সুবিধা ছোট করে দেখাতে চাইছি না। প্রিপ্রসেসর ব্যবহার কর্মদক্ষতা বাড়াতে আবশ্যক। ওগুলায় প্রিপ্রসেসর ছাড়াও অনেক ফিচার রয়েছে। তাতে অগণিত বিল্ট ইন ফাংশন, লুপ ও কন্ডিশনাল স্টেটমেন্ট ব্যবহারের সুব্যবস্থা আছে।

এই টিউটোরিয়াল কেবল নেটিভ ভ্যারিয়েবলের সিনট্যাক্স, এবং এর সুবিধা সবার সামনে তুলে ধরার চেষ্টা করেছে। আপনার কোন প্রশ্ন থাকলে তা নিচে কমেন্টে আমাদের অবশ্যই জানাবেন।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.