SASS-এ কন্ডিশনাল
এই প্রবন্ধে SASS-এ কন্ডিশনাল ব্যাখ্যা করা হয়েছে।
ব্যবহারিক উদাহরণসহ @if, @else if, এবং @else ডিরেকটিভ ব্যবহার করে কন্ডিশনালের বেসিক থেকে অ্যাডভান্সড ব্যবহার পর্যন্ত সবকিছু আমরা পরিষ্কারভাবে ব্যাখ্যা করি।
YouTube Video
SASS-এ কন্ডিশনাল
SASS হলো CSS-কে সম্প্রসারিত করা একটি স্টাইলশীট ভাষা, এবং কন্ডিশনাল ব্যবহার করে আপনি স্টাইলগুলি নমনীয়ভাবে নিয়ন্ত্রণ করতে পারেন। SASS-এ, কম্পাইল সময় স্টাইলের আউটপুট পরিবর্তনের জন্য আপনি @if, @else if, এবং @else ব্যবহার করতে পারেন।
কন্ডিশনালের মৌলিক সিনট্যাক্স
SASS-এ মৌলিক কন্ডিশনাল নিম্নোক্ত সিনট্যাক্সে লেখা হয়।
1@if condition {
2 // Code executed when the condition is true
3} @else if condition {
4 // Code executed when another condition is true
5} @else {
6 // Code executed when all conditions are false
7}@ifপ্রথম শর্তটি মূল্যায়ন করে, এবং তা মিথ্যা হলে ক্রমানুসারে@else ifবা@elseব্লকগুলো মূল্যায়ন করা হয়।
সহজ কন্ডিশনাল উদাহরণ
নিচের উদাহরণে, $theme ভেরিয়েবলের উপর ভিত্তি করে ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হয়।
1$theme: "dark";
2
3body {
4 @if $theme == "dark" {
5 background-color: #333;
6 color: #fff;
7 } @else if $theme == "light" {
8 background-color: #fff;
9 color: #000;
10 } @else {
11 background-color: #f0f0f0;
12 color: #333;
13 }
14}কম্পাইল করা CSS
1body {
2 background-color: #333;
3 color: #fff;
4}- যখন
$theme"dark"হয়, তখন গাঢ় ব্যাকগ্রাউন্ড ও সাদা টেক্সট রঙ প্রয়োগ হয়।
গণনার সাথে কন্ডিশনাল মিলিয়ে ব্যবহার
কন্ডিশনাল কেবল স্ট্রিং ও রঙের তুলনাই নয়, সংখ্যাগত গণনাও সামলাতে পারে।
1$width: 1200px;
2
3.container {
4 @if $width > 1000px {
5 max-width: 1200px;
6 } @else {
7 max-width: 800px;
8 }
9}কম্পাইল করা CSS
1.container {
2 max-width: 1200px;
3}- সংখ্যাগত তুলনাও সম্ভব, এবং
$width1000px অতিক্রম করলেmax-width: 1200pxআউটপুট হয়।
নেস্টেড কন্ডিশনাল
কন্ডিশনাল নেস্ট করলে জটিল শর্ত প্রকাশ করা যায়।
1$theme: "dark";
2$size: "large";
3
4button {
5 @if $theme == "dark" {
6 background-color: #000;
7 color: #fff;
8
9 @if $size == "large" {
10 padding: 20px;
11 } @else {
12 padding: 10px;
13 }
14 } @else {
15 background-color: #fff;
16 color: #000;
17
18 @if $size == "large" {
19 padding: 15px;
20 } @else {
21 padding: 8px;
22 }
23 }
24}কম্পাইল করা CSS
1button {
2 background-color: #000;
3 color: #fff;
4 padding: 20px;
5}- কন্ডিশনাল নেস্ট করার মাধ্যমে থিম ও সাইজ—উভয়ের ভিত্তিতে স্টাইলিং করা যায়।
কাস্টম ফাংশনে কন্ডিশনাল ব্যবহার
কাস্টম ফাংশনের ভিতরে কন্ডিশনাল ব্যবহার করলে পুনঃব্যবহারযোগ্যতা বাড়ে।
1@function adjust-color($theme) {
2 @if $theme == "dark" {
3 @return #333;
4 } @else if $theme == "light" {
5 @return #fff;
6 } @else {
7 @return #ccc;
8 }
9}
10
11.card {
12 background-color: adjust-color("dark");
13}কম্পাইল করা CSS
1.card {
2 background-color: #333;
3}- কন্ডিশনালকে ফাংশনে এনক্যাপসুলেট করলে পুনঃব্যবহারযোগ্যতা ও রক্ষণাবেক্ষণযোগ্যতা বাড়ে।
প্রায়োগিক উদাহরণ - ডিজাইন পরিবর্তন
নির্দিষ্ট শর্তের ভিত্তিতে সামগ্রিক ডিজাইন বদলানোর একটি উদাহরণ দেখি।
1$theme: "light";
2
3body {
4 font-family: Arial, sans-serif;
5
6 @if $theme == "dark" {
7 background-color: #121212;
8 color: #e0e0e0;
9 } @else if $theme == "light" {
10 background-color: #f9f9f9;
11 color: #333;
12 } @else {
13 background-color: #fff;
14 color: #000;
15 }
16}
17
18header {
19 @if $theme == "dark" {
20 border-bottom: 1px solid #333;
21 } @else {
22 border-bottom: 1px solid #ccc;
23 }
24}কম্পাইল করা CSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f9f9f9;
4 color: #333;
5}
6
7header {
8 border-bottom: 1px solid #ccc;
9}- থিম ভেরিয়েবলের উপর ভিত্তি করে পুরো পৃষ্ঠার রঙের স্কিম গতিশীলভাবে পরিবর্তন করা যায়।
নোট ও সেরা অনুশীলনসমূহ
SASS-এর শর্তযুক্ত বিবৃতি ব্যবহার করার সময়, আপনি নিম্নলিখিত বিষয়গুলো বিবেচনা করতে পারেন।
-
কন্ডিশনাল সরল রাখুন
জটিল নেস্টিং পাঠযোগ্যতা ক্ষতিগ্রস্ত করে; তাই ফাংশন ও মিক্সিন কাজে লাগালে বিষয়গুলো সরল রাখা যায়।
-
ভেরিয়েবল ও ফাংশনের মাধ্যমে অ্যাবস্ট্র্যাক্ট করুন
একাধিক স্থানে একই ধরনের শর্ত ব্যবহার করলে সেগুলোকে ভেরিয়েবল বা ফাংশনে একত্রিত করলে রক্ষণাবেক্ষণযোগ্যতা বাড়ে।
-
অতিরিক্ত জটিল লজিক এড়িয়ে চলুন
যথাসম্ভব ডিজাইন রুলগুলো একীভূত করুন এবং কন্ডিশনাল অতিরিক্ত ব্যবহার থেকে বিরত থাকুন।
উপসংহার
নমনীয় ও গতিশীল স্টাইল তৈরি করতে SASS-এ কন্ডিশনাল একটি অত্যন্ত কার্যকর টুল। এখানে আমরা বেসিক থেকে প্রায়োগিক উদাহরণ পর্যন্ত ধাপে ধাপে সবকিছু ব্যাখ্যা করেছি। বাস্তব প্রকল্পে কন্ডিশনাল ব্যবহার করার সময়, বিষয়গুলো অযথা জটিল না করে পুনঃব্যবহারযোগ্য কোডের দিকটি মাথায় রেখে ডিজাইন করুন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।