Theming বা থিমিং হলো অ্যাপ্লিকেশনের ডিজাইন এবং রং পরিবর্তন করার প্রক্রিয়া যাতে ব্যবহারকারী বা ডেভেলপার তাদের প্রয়োজন অনুসারে অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) কাস্টমাইজ করতে পারে। SCSS (Sassy CSS) এবং CSS Variables ব্যবহার করে আপনি একটি custom theme তৈরি করতে পারেন যা অ্যাপ্লিকেশনের ভিজ্যুয়াল স্টাইল সহজে কাস্টমাইজ করতে সাহায্য করে।
SCSS এবং CSS Variables ব্যবহার করে থিমিং করা একটি শক্তিশালী পদ্ধতি কারণ এটি রং, ফন্ট, মাপ, এবং অন্যান্য UI উপাদানকে দ্রুত এবং কেন্দ্রীভূতভাবে পরিবর্তন করার সুযোগ দেয়।
১. SCSS এবং CSS Variables এর ধারণা
SCSS:
SCSS (Sassy CSS) হলো CSS এর একটি উন্নত সংস্করণ যা আরও কার্যকরী ফিচার প্রদান করে, যেমন:
- Variables: পুনঃব্যবহারযোগ্য মান সংরক্ষণ করার জন্য
- Nesting: CSS রুলগুলিকে সহজে নেস্ট করা
- Mixins: কোডের পুনঃব্যবহারযোগ্য টুকরো তৈরি করা
CSS Variables:
CSS Variables (যেমন --primary-color) হলো CSS এর এমন একটি বৈশিষ্ট্য যা রঙ, মাপ, বা অন্যান্য প্রোপার্টি মানগুলিকে ভেরিয়েবল হিসেবে সংজ্ঞায়িত করতে সক্ষম, এবং সেগুলো সম্পূর্ণ অ্যাপ্লিকেশন বা সাইটে একসাথে ব্যবহার করা যায়।
২. SCSS এবং CSS Variables দিয়ে Custom Theming
SCSS এবং CSS Variables ব্যবহার করে কাস্টম থিম তৈরি করতে হলে আপনাকে কিছু ভেরিয়েবল নির্ধারণ করতে হবে যা অ্যাপ্লিকেশনের রং, ফন্ট, মার্জিন, প্যাডিং ইত্যাদি কাস্টমাইজ করার জন্য ব্যবহার হবে।
২.১ SCSS থিমিং কনফিগারেশন
- SCSS Variables তৈরি করা: SCSS ফাইলে সাধারণত কাস্টম ভেরিয়েবল ডিফাইন করা হয়, যেগুলি পরে CSS প্রোপার্টি হিসেবে ব্যবহার করা হয়। এভাবে, আপনি আপনার থিমের রং, ফন্ট সাইজ, মার্জিন ইত্যাদি কাস্টমাইজ করতে পারবেন।
// _variables.scss
$primary-color: #3498db; // প্রধান রং
$secondary-color: #2ecc71; // সেকেন্ডারি রং
$background-color: #f4f4f4; // ব্যাকগ্রাউন্ড রং
$text-color: #333; // টেক্সট রং
$font-family: 'Arial', sans-serif; // ফন্ট
- SCSS ফাইলগুলো ব্যবহার করা: SCSS এর মধ্যে তৈরি করা ভেরিয়েবলগুলি অন্য SCSS ফাইলগুলোতে ব্যবহার করা হয়। আপনি একটি মূল থিম ফাইল তৈরি করে সমস্ত প্রোপার্টি এখানে ডিফাইন করতে পারেন এবং সেগুলি আপনার অ্যাপ্লিকেশনের অন্যান্য অংশে ব্যবহার করতে পারেন।
// _theme.scss
@import 'variables';
body {
background-color: $background-color;
color: $text-color;
font-family: $font-family;
}
button {
background-color: $primary-color;
color: white;
}
a {
color: $secondary-color;
text-decoration: none;
}
- SCSS ফাইল কম্পাইল করা: SCSS ফাইলগুলোকে CSS এ কম্পাইল করতে হয়, যা ব্রাউজারে ব্যবহার করা যায়। Ionic অ্যাপ্লিকেশন বা অন্যান্য ওয়েব অ্যাপ্লিকেশনে SCSS ফাইলগুলো স্বয়ংক্রিয়ভাবে কম্পাইল করা হয় যদি সঠিকভাবে সেটআপ করা থাকে।
২.২ CSS Variables দিয়ে থিমিং
CSS Variables আপনাকে থিমিং আরও সহজভাবে কাস্টমাইজ করতে দেয়। আপনি একটি সাধারণ CSS ভেরিয়েবল সেট তৈরি করতে পারেন এবং তা সাইটের যে কোনো স্থানে ব্যবহার করতে পারেন। CSS Variables খুবই শক্তিশালী কারণ এগুলি পুরো অ্যাপ্লিকেশন জুড়ে রিয়েল টাইমে পরিবর্তন করা সম্ভব।
- CSS Variables তৈরি করা: সাধারণত আপনি
:rootসিলেক্টরের মাধ্যমে গ্লোবাল ভেরিয়েবল ডিফাইন করেন, যাতে আপনি এই ভেরিয়েবলগুলো পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহার করতে পারেন।
/* Global CSS Variables */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--background-color: #f4f4f4;
--text-color: #333;
--font-family: 'Arial', sans-serif;
}
- CSS Variables ব্যবহার করা: এবার আপনি এই ভেরিয়েবলগুলো CSS এর মধ্যে যেকোনো স্থানে ব্যবহার করতে পারেন। এটি আপনাকে অনেক সুবিধা দেয়, যেমন এক জায়গায় ভেরিয়েবল পরিবর্তন করলে সেগুলি সমস্ত স্থানে পরিবর্তিত হবে।
/* Using CSS Variables */
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
}
button {
background-color: var(--primary-color);
color: white;
}
a {
color: var(--secondary-color);
text-decoration: none;
}
৩. SCSS এবং CSS Variables একত্রে ব্যবহার করা
SCSS এবং CSS Variables একত্রে ব্যবহার করে আপনি আরও শক্তিশালী এবং নমনীয় থিমিং ব্যবস্থা তৈরি করতে পারবেন। SCSS এর সুবিধা হলো, আপনি ভেরিয়েবলগুলোকে একত্রে ব্যবহার করতে পারেন এবং আরো জটিল থিমিং করতে পারবেন।
- SCSS এবং CSS Variables এর সংমিশ্রণ: আপনি SCSS এর ভেরিয়েবলগুলোর সাথে CSS Variables ব্যবহার করতে পারেন। এভাবে, SCSS এর শক্তি এবং CSS Variables এর নমনীয়তা একসাথে পাওয়া যাবে।
// _variables.scss (SCSS)
$primary-color: #3498db;
$background-color: var(--background-color, #f4f4f4); // CSS variable fallback
:root {
--text-color: #333;
}
- থিম পরিবর্তন করা: যখন আপনি আপনার অ্যাপের থিম পরিবর্তন করতে চান, তখন শুধুমাত্র
:rootএর ভেরিয়েবলগুলো আপডেট করুন, অথবা SCSS ফাইলগুলোতে নতুন ভেরিয়েবল নির্ধারণ করুন।
/* Change theme dynamically */
body {
background-color: var(--background-color);
color: var(--text-color);
}
button {
background-color: $primary-color;
}
৪. Dynamic Theme Change (থিম পরিবর্তন করা)
CSS Variables এর সবচেয়ে বড় সুবিধা হলো থিম পরিবর্তন করা খুবই সহজ। আপনি JavaScript এর মাধ্যমে ডায়নামিকভাবে CSS Variables পরিবর্তন করতে পারেন এবং পুরো অ্যাপ্লিকেশন জুড়ে তা সঠিকভাবে রিফ্লেক্ট হবে।
৪.১ JavaScript দিয়ে CSS Variables পরিবর্তন করা:
// Changing CSS variables dynamically
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
document.documentElement.style.setProperty('--background-color', '#ecf0f1');
এটি অ্যাপ্লিকেশনের থিম পরিবর্তন করতে সহায়ক হবে, যেমন রাতের মোড (dark mode) বা দিনের মোড (light mode) ইত্যাদি।
সারাংশ
- SCSS এবং CSS Variables ব্যবহার করে আপনি অ্যাপ্লিকেশনের থিম খুব সহজে কাস্টমাইজ করতে পারেন। SCSS আপনাকে ভেরিয়েবল, মিক্সিন, এবং নেস্টিংয়ের মাধ্যমে আরো উন্নত থিমিং করার সুযোগ দেয়, এবং CSS Variables ব্যবহার করে আপনি অ্যাপ্লিকেশন জুড়ে ডায়নামিক থিম পরিবর্তন করতে পারেন।
- SCSS দিয়ে আপনি থিমের জন্য বেসিক রং, ফন্ট, মার্জিন ইত্যাদি নির্ধারণ করতে পারেন, আর CSS Variables দিয়ে আপনি সেই থিমটি পরিবর্তন করতে পারবেন রিয়েল টাইমে।
Read more
