Sass এর ভূমিকা
Sass (Syntactically Awesome Stylesheets) হল একটি প্রি-প্রসেসর যা CSS (Cascading Style Sheets) এর উপর ভিত্তি করে কাজ করে। এটি CSS লেখার প্রক্রিয়াকে আরও শক্তিশালী, কার্যকরী, এবং রক্ষণাবেক্ষণযোগ্য করে তোলে। Sass সিএসএস এর জন্য পরিবর্তনশীল (variables), মিক্সিন (mixins), ফাংশন (functions), এবং অন্যান্য বৈশিষ্ট্য প্রদান করে যা কোডকে আরও সহজ ও সংগঠিত রাখে।
ইউনিটের সাথে অপারেশন করা (px, em, rem)
CSS এ ডিজাইন এবং লেআউট তৈরির সময় সাধারণত বিভিন্ন ইউনিট ব্যবহৃত হয়, যেমন px, em, এবং rem। যখন আমরা Sass ব্যবহার করি, তখন আমরা এসব ইউনিটের সাথে অপারেশন (যেমন যোগ, বিয়োগ, গুণ, ভাগ) করতে পারি যাতে কোডের পুনঃব্যবহারযোগ্যতা এবং স্থিতিস্থাপকতা বৃদ্ধি পায়।
Sass এর মাধ্যমে আপনি px, em, rem এর মধ্যে সহজেই অপারেশন করতে পারেন, যা লেআউটকে আরও নমনীয় এবং রেসপন্সিভ করতে সাহায্য করে।
১. px (পিক্সেল)
px হল একটি নির্দিষ্ট দৈর্ঘ্য ইউনিট, যা সাধারণত ডিসপ্লে রেজুলেশনের ওপর নির্ভর করে না। এটি একটি অ্যাবসোলিউট ইউনিট, অর্থাৎ এটি বিভিন্ন ডিভাইসে একই আকারে প্রদর্শিত হয়।
উদাহরণ:
$base-font-size: 16px;
body {
font-size: $base-font-size; // 16px
}
h1 {
font-size: $base-font-size * 2; // 32px (16px * 2)
}
এখানে, 16px হচ্ছে একটি নির্দিষ্ট দৈর্ঘ্য, এবং $base-font-size এর সাথে গুণ করে h1 এর ফন্ট সাইজ 32px তৈরি করা হয়েছে।
২. em (এম)
em হল একটি রিলেটিভ ইউনিট যা তার প্যারেন্ট এলিমেন্টের ফন্ট সাইজের উপর ভিত্তি করে কাজ করে। 1em মানে প্যারেন্টের ফন্ট সাইজের সমান। এটি একটি রিলেটিভ ইউনিট, এবং প্যারেন্ট এলিমেন্টের ফন্ট সাইজ অনুযায়ী পরিবর্তিত হয়।
উদাহরণ:
$base-font-size: 16px;
body {
font-size: $base-font-size; // 16px
}
h1 {
font-size: 2em; // 32px (2 * 16px)
}
h2 {
font-size: 1.5em; // 24px (1.5 * 16px)
}
এখানে, h1 এর ফন্ট সাইজ 2em হওয়ায় এটি 32px হবে, কারণ প্যারেন্ট এলিমেন্টের ফন্ট সাইজ 16px।
em এর সাথে অপারেশন:
$base-size: 1em;
div {
width: $base-size * 3; // 3em
}
এখানে, div এর width হচ্ছে 3em, যা প্যারেন্ট ফন্ট সাইজের তিন গুণ।
৩. rem (রুট এম)
rem হল একটি রিলেটিভ ইউনিট যা root element এর ফন্ট সাইজের উপর ভিত্তি করে কাজ করে। এটি পেজের মূল (root) ফন্ট সাইজের সাথে সম্পর্কিত থাকে, যা সাধারণত html ট্যাগের মধ্যে নির্ধারিত থাকে।
উদাহরণ:
html {
font-size: 16px; // 1rem = 16px
}
body {
font-size: 1rem; // 16px
}
h1 {
font-size: 2rem; // 32px (2 * 16px)
}
এখানে, rem ব্যবহার করে ফন্ট সাইজ ঠিক করা হয়েছে এবং এটি html ট্যাগের ফন্ট সাইজের উপর নির্ভরশীল। যদি html ট্যাগে ফন্ট সাইজ পরিবর্তিত হয়, তাহলে সমস্ত rem ভিত্তিক সাইজ পরিবর্তিত হবে।
rem এর সাথে অপারেশন:
$base-size: 1rem;
section {
width: $base-size * 5; // 5rem
}
এখানে, section এর width হচ্ছে 5rem, যা root html ট্যাগের ফন্ট সাইজের পাঁচ গুণ।
Sass এ ইউনিট অপারেশন করা
Sass এ ইউনিটের সাথে অপারেশন করতে যত্নসহকারে ইউনিটগুলো মিলিয়ে নেওয়া জরুরি, কারণ কিছু ইউনিট যেমন px এবং em একে অপরের সাথে সরাসরি অপারেশন করতে পারে না। তবে, Sass এই ধরনের অপারেশন খুব সহজেই করতে সক্ষম। বিভিন্ন ইউনিটের সঙ্গে Arithmetic Operations করতে কিছু নিয়ম অনুসরণ করতে হবে:
Unité নিয়ে অপারেশন:
$base-font-size: 16px;
$spacing: 2em;
.div {
font-size: $base-font-size + $spacing; // অপারেশন চলবে না, এটির জন্য পিক্সেল এবং এম ইউনিট একত্রিত করা যাবে না
}
$base-font-size-px: 16px;
$spacing-px: 32px;
.div {
width: $base-font-size-px + $spacing-px; // কাজ করবে, উভয়ই px ইউনিট
}
এখানে, আপনি যদি px এবং em ইউনিট একসাথে ব্যবহার করেন, তাহলে Sass তাদের সরাসরি যোগ করতে দেবে না। তবে আপনি সমজাতীয় ইউনিটগুলোর সাথে কাজ করতে পারবেন।
সাসে ইউনিট অপারেশনের সুবিধা
- ডায়নামিক সাইজ ক্যালকুলেশন: সাসে আপনি সহজেই ইউনিটের সাথে অপারেশন করে ডায়নামিক সাইজ ক্যালকুলেশন করতে পারেন, যা ওয়েব ডিজাইনের জন্য খুবই কার্যকর।
- রেসপন্সিভ ডিজাইন:
emএবংremব্যবহার করে আপনি ওয়েব পেজের ফন্ট সাইজ, মার্জিন, প্যাডিং ইত্যাদি রেসপন্সিভভাবে কন্ট্রোল করতে পারেন। - কোড পুনরায় ব্যবহারযোগ্যতা: Sass এর মাধ্যমে আপনি একাধিক ইউনিটের সঙ্গে গাণিতিক অপারেশন করে একটি একক ইউনিটে রূপান্তরিত করতে পারেন, যা কোডের পুনরায় ব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ সহজ করে তোলে।
সারাংশ
Sass এ ইউনিট অপারেশন করার মাধ্যমে আপনি px, em, এবং rem এর মধ্যে সহজে গাণিতিক অপারেশন করতে পারেন। Sass এর গাণিতিক ক্ষমতা আপনাকে ওয়েব ডিজাইন আরও নমনীয় এবং রেসপন্সিভ করার সুযোগ দেয়। তবে, বিভিন্ন ইউনিটগুলোর সাথে অপারেশন করার সময় তাদের সম্পর্ক এবং বৈশিষ্ট্য বুঝে কাজ করা জরুরি।
Read more
