Sass Control Directives এর ভূমিকা
Sass (Syntactically Awesome Stylesheets) হল একটি শক্তিশালী CSS প্রিপ্রসেসর, যা CSS লেখার পদ্ধতিকে আরও কার্যকরী এবং পরিচালনা সহজ করে তোলে। Sass এর মধ্যে বিভিন্ন Control Directives (যেমন, @if, @else, @for, @each, @while) ব্যবহৃত হয়, যা স্টাইলশীটগুলির মধ্যে শর্তানুসারে বা লুপের মাধ্যমে কোডকে আরও ডাইনামিক এবং রিইউজেবল করে তোলে।
Control Directives ব্যবহার করে, আপনি CSS কোডের মধ্যে লজিক এবং কন্ডিশনাল কার্যকারিতা প্রয়োগ করতে পারেন, যা সাধারণত শুধুমাত্র প্রোগ্রামিং ভাষায় পাওয়া যায়, কিন্তু Sass এ আপনি স্টাইলশীটের মধ্যে এই ধরনের কার্যকারিতা যুক্ত করতে পারবেন।
১. @if এবং @else
@if এবং @else ডিরেকটিভগুলি শর্তাধীন (conditional) লজিক ব্যবহারের জন্য ব্যবহার করা হয়। এর মাধ্যমে আপনি শর্তানুসারে CSS স্টাইল অ্যাসাইন করতে পারেন।
উদাহরণ: @if এবং @else ব্যবহার
$theme: light;
.button {
@if $theme == light {
background-color: white;
color: black;
} @else {
background-color: black;
color: white;
}
}
এখানে, $theme ভেরিয়েবল যদি light হয়, তবে বাটনের ব্যাকগ্রাউন্ড সাদা এবং টেক্সট কালো হবে। অন্যথায়, এটি কালো ব্যাকগ্রাউন্ড এবং সাদা টেক্সট হবে।
২. @for
@for ডিরেকটিভটি লুপিংয়ের জন্য ব্যবহৃত হয়, যেখানে আপনি একটি নির্দিষ্ট রেঞ্জের মধ্যে কোড পুনরাবৃত্তি করতে পারেন। এটি স্টাইলশীটগুলিতে সিকোয়েন্স বা সংখ্যার ভিত্তিতে স্টাইল তৈরি করতে সহায়তা করে।
উদাহরণ: @for ব্যবহার
@for $i from 1 to 5 {
.col-#{$i} {
width: 20px * $i;
}
}
এখানে, ১ থেকে ৫ পর্যন্ত @for লুপ চলবে এবং প্রতিটি .col-1, .col-2, .col-3 ইত্যাদির জন্য প্রোপার্টি সেট করবে, যেখানে প্রস্থ ভ্যারিয়েবল $i এর মান অনুযায়ী পরিবর্তিত হবে।
৩. @each
@each ডিরেকটিভটি একটি অ্যারে বা মানের সেটের উপর পুনরাবৃত্তি করার জন্য ব্যবহৃত হয়। এটি খুবই উপকারী যখন আপনি একাধিক ভ্যালু বা লিস্টের উপরে অপারেশন করতে চান।
উদাহরণ: @each ব্যবহার
$colors: red, green, blue;
@each $color in $colors {
.#{$color} {
color: $color;
}
}
এখানে, $colors লিস্টের প্রতিটি মানের জন্য ক্লাস তৈরি হবে, যেমন .red, .green, .blue এবং তাদের জন্য যথাক্রমে রঙ নির্ধারণ করা হবে।
৪. @while
@while ডিরেকটিভটি একটি শর্ত পূর্ণ না হওয়া পর্যন্ত পুনরাবৃত্তি চালাতে ব্যবহৃত হয়। এটি সাধারণত একটি নির্দিষ্ট শর্ত পূর্ণ না হওয়া পর্যন্ত ব্যবহার করা হয়।
উদাহরণ: @while ব্যবহার
$i: 1;
@while $i <= 5 {
.col-#{$i} {
width: 20px * $i;
}
$i: $i + 1;
}
এখানে, $i এর মান ৫ পর্যন্ত বাড়বে এবং প্রতিটি .col-1, .col-2, .col-3 ইত্যাদির জন্য প্রোপার্টি সেট করবে।
৫. @debug
@debug ডিরেকটিভটি ডেভেলপারদের জন্য ব্যবহৃত হয়, যাতে তারা কনসোলে ভেরিয়েবল বা এক্সপ্রেশনের মান দেখতে পারেন। এটি কোড ডিবাগিং বা মান যাচাই করতে সহায়ক।
উদাহরণ: @debug ব্যবহার
$color: blue;
@debug $color; // Output: blue
এখানে, $color ভেরিয়েবলের মান ডিবাগার কনসোলে দেখানো হবে।
৬. @warn
@warn ডিরেকটিভটি শর্তসাপেক্ষে একটি সতর্কতা বার্তা প্রিন্ট করতে ব্যবহৃত হয়। এটি সাধারণত এমন ক্ষেত্রে ব্যবহার করা হয় যখন আপনি কোনো নির্দিষ্ট শর্তে কিছু সতর্কবার্তা দেখাতে চান।
উদাহরণ: @warn ব্যবহার
$theme: dark;
@warn "Theme is set to #{$theme}.";
এখানে, যদি $theme ভেরিয়েবলের মান dark হয়, তাহলে একটি সতর্কবার্তা কনসোলে প্রিন্ট হবে।
সারাংশ
Sass এর Control Directives (যেমন @if, @else, @for, @each, @while) ব্যবহার করে আপনি স্টাইলশীটে লজিক এবং কন্ডিশনাল প্রক্রিয়া প্রয়োগ করতে পারেন, যা কোডিংকে আরও শক্তিশালী, সুনির্দিষ্ট এবং ডাইনামিক করে তোলে। এগুলি ব্যবহার করে আপনি জটিল স্টাইলশীট তৈরি করতে পারেন, যেখানে কোডের পুনরাবৃত্তি কম হয় এবং উন্নত কাস্টমাইজেশন করা যায়। Sass এর এই ফিচারগুলি CSS লেখার প্রক্রিয়াকে আরও কার্যকরী এবং রিডেবল করে তোলে।
Sass এবং শর্তানুযায়ী স্টাইল প্রয়োগ
Sass হল একটি প্রিপ্রসেসর যা CSS কে আরও শক্তিশালী এবং প্রোগ্রামেবল করে তোলে। এর মাধ্যমে আপনি কোড পুনরায় ব্যবহারযোগ্য, রক্ষণাবেক্ষণযোগ্য এবং আরো সংগঠিত করতে পারেন। Sass এর অন্যতম শক্তিশালী বৈশিষ্ট্য হল শর্তানুযায়ী স্টাইল প্রয়োগ (Conditional Styling) করার সুবিধা, যা আপনাকে CSS কোডে লজিক প্রয়োগ করতে দেয়।
Sass-এ শর্তানুযায়ী স্টাইল প্রয়োগ করতে @if, @else, এবং @else if ডিরেকটিভ ব্যবহার করা হয়। এগুলি আপনাকে নির্দিষ্ট শর্তের উপর ভিত্তি করে CSS ক্লাস বা প্রপার্টি অ্যাপ্লাই করতে সাহায্য করে।
@if, @else, এবং @else if এর ব্যবহার
১. @if
@if ডিরেকটিভের মাধ্যমে আপনি একটি শর্ত নির্ধারণ করতে পারেন, যার মাধ্যমে আপনি সিলেক্টর বা প্রপার্টির উপর শর্তানুযায়ী স্টাইল প্রয়োগ করতে পারবেন।
সিনট্যাক্স:
@if condition {
// Code to execute if the condition is true
}
উদাহরণ:
$theme: light;
.button {
@if $theme == light {
background-color: white;
color: black;
} @else {
background-color: black;
color: white;
}
}
এখানে, যদি $theme এর মান light হয়, তবে বাটনের ব্যাকগ্রাউন্ড সাদা হবে এবং টেক্সট কালো হবে। অন্যথায়, ব্যাকগ্রাউন্ড কালো এবং টেক্সট সাদা হবে।
২. @else
@else ডিরেকটিভটি @if এর পরে ব্যবহৃত হয় এবং এটি তখন কার্যকরী হয় যখন প্রথম শর্ত সত্য না হয়। এটি একটি বিকল্প শর্ত (alternative condition) হিসেবে কাজ করে।
সিনট্যাক্স:
@if condition {
// Code to execute if the condition is true
} @else {
// Code to execute if the condition is false
}
উদাহরণ:
$color: red;
.button {
@if $color == red {
background-color: red;
color: white;
} @else {
background-color: green;
color: black;
}
}
এখানে, যদি $color এর মান red হয়, তবে ব্যাকগ্রাউন্ড রেড হবে এবং টেক্সট সাদা হবে। অন্যথায়, ব্যাকগ্রাউন্ড গ্রীন এবং টেক্সট কালো হবে।
৩. @else if
@else if ডিরেকটিভটি একাধিক শর্ত চেক করতে ব্যবহৃত হয়। এটি @if এবং @else এর মতো কাজ করে, তবে এটি অতিরিক্ত শর্ত যোগ করতে দেয়।
সিনট্যাক্স:
@if condition {
// Code to execute if the first condition is true
} @else if another_condition {
// Code to execute if the second condition is true
} @else {
// Code to execute if none of the conditions are true
}
উদাহরণ:
$buttonType: primary;
.button {
@if $buttonType == primary {
background-color: blue;
color: white;
} @else if $buttonType == secondary {
background-color: gray;
color: black;
} @else {
background-color: transparent;
color: black;
}
}
এখানে, যদি $buttonType এর মান primary হয়, তবে ব্যাকগ্রাউন্ড ব্লু এবং টেক্সট সাদা হবে। যদি $buttonType এর মান secondary হয়, তবে ব্যাকগ্রাউন্ড গ্রে এবং টেক্সট কালো হবে। অন্যথায়, ব্যাকগ্রাউন্ড ট্রান্সপারেন্ট এবং টেক্সট কালো হবে।
সারাংশ
Sass-এ @if, @else, এবং @else if ডিরেকটিভ ব্যবহার করে আপনি CSS কোডে শর্তানুযায়ী স্টাইল প্রয়োগ করতে পারেন। এটি শর্তানুযায়ী বিভিন্ন স্টাইল প্রয়োগ করার জন্য একটি শক্তিশালী কৌশল, যা কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা বাড়ায়। এই ডিরেকটিভগুলো আপনাকে কোডের মধ্যে লজিক যোগ করতে এবং ভিন্ন শর্ত অনুযায়ী স্টাইল কাস্টমাইজ করতে সহায়তা করে, যা বিশেষ করে প্রজেক্টের ডিজাইন এবং থিমিংয়ের ক্ষেত্রে খুবই কার্যকরী।
Sass এর ভূমিকা
Sass (Syntactically Awesome Stylesheets) হল একটি CSS প্রিপ্রসেসর যা CSS এর লেখার প্রক্রিয়াকে আরও উন্নত, শক্তিশালী এবং সুবিধাজনক করে তোলে। এটি মেইনটেইনেবল স্টাইলশিট তৈরি করতে সহায়তা করে এবং CSS এর মৌলিক সীমাবদ্ধতাগুলি কাটিয়ে ওঠে।
Sass-এ লুপ, কন্ডিশনাল স্টেটমেন্টস, ভ্যারিয়েবলস, মিক্সিনস এবং ইনহেরিটেন্সের মতো ফিচার রয়েছে, যা আপনাকে আরও পোর্টেবল এবং ডাইনামিক CSS তৈরি করতে সহায়তা করে। এর মধ্যে @for, @each, এবং @while হল লুপ তৈরির জন্য ব্যবহৃত বিশেষ ডিরেকটিভ, যা CSS কোড লেখাকে আরও সোজা এবং ছোট করে তোলে।
১. @for লুপ
@for ডিরেকটিভটি একটি নির্দিষ্ট সংখ্যক পুনরাবৃত্তি (iteration) সম্পন্ন করার জন্য ব্যবহৃত হয়। আপনি একটি শর্ত নির্ধারণ করে এটি ব্যবহার করতে পারেন, যা নির্দিষ্ট রেঞ্জের মধ্যে মানের উপর ভিত্তি করে কোড তৈরি করবে।
সিনট্যাক্স:
@for $i from <start> through <end> {
// কোড ব্লক
}
উদাহরণ:
ধরা যাক, আপনি ১০টি কলামের স্টাইল তৈরি করতে চান যেখানে প্রতিটি কলামের প্রস্থ ১০px বাড়বে।
@for $i from 1 through 10 {
.col-#{$i} {
width: 10px * $i;
}
}
এখানে, @for ১ থেকে ১০ পর্যন্ত লুপ চালাবে এবং .col-1, .col-2, ... .col-10 ক্লাস তৈরি করবে, যেখানে প্রত্যেকের প্রস্থ ১০px বৃদ্ধি পাবে।
২. @each লুপ
@each ডিরেকটিভটি একটি তালিকা বা ম্যাপের উপর লুপ চালানোর জন্য ব্যবহৃত হয়। এটি একটি এলিমেন্টকে অ্যারে বা ম্যাপ থেকে একে একে বের করে এনে, তার উপর নির্দিষ্ট কাজ করতে সহায়তা করে।
সিনট্যাক্স:
@each $variable in $list {
// কোড ব্লক
}
উদাহরণ:
ধরা যাক, আপনি একটি কালার প্যালেটের জন্য ক্লাস তৈরি করতে চান।
$colors: red, blue, green, yellow;
@each $color in $colors {
.bg-#{$color} {
background-color: $color;
}
}
এখানে, @each ডিরেকটিভটি $colors অ্যারের প্রতিটি উপাদানের জন্য একটি CSS ক্লাস তৈরি করবে। এই কোডটি .bg-red, .bg-blue, .bg-green, এবং .bg-yellow ক্লাস তৈরি করবে, এবং তাদের ব্যাকগ্রাউন্ড কালার সেই অনুযায়ী অ্যাসাইন করবে।
৩. @while লুপ
@while ডিরেকটিভটি একটি শর্তের উপর ভিত্তি করে লুপ চালানোর জন্য ব্যবহৃত হয়। এটি যতক্ষণ না শর্ত পূর্ণ হয় ততক্ষণ পর্যন্ত কোডটি পুনরায় এক্সিকিউট করবে।
সিনট্যাক্স:
@while <condition> {
// কোড ব্লক
}
উদাহরণ:
ধরা যাক, আপনি ১০ থেকে ১ পর্যন্ত সংখ্যা হিসেব করে একটি ক্লাস তৈরি করতে চান।
$i: 10;
@while $i > 0 {
.item-#{$i} {
width: $i * 10px;
}
$i: $i - 1;
}
এখানে, @while ডিরেকটিভটি $i ১০ থেকে শুরু হয়ে ১ পর্যন্ত চলবে এবং .item-10, .item-9, ... .item-1 ক্লাস তৈরি করবে, যেখানে প্রতিটি ক্লাসের প্রস্থ $i * 10px এর সমান হবে।
লুপের মাধ্যমে ডায়নামিক CSS তৈরি করা
Sass-এ লুপ ব্যবহার করলে আপনি ডায়নামিক CSS তৈরি করতে পারেন, যা কোডের পুনরাবৃত্তি কমায় এবং মেইনটেনেবল স্টাইলশিট তৈরি করতে সাহায্য করে। নিচে কিছু গুরুত্বপূর্ণ বিষয় আলোচনা করা হলো:
- কোড রিইউজযোগ্যতা: লুপের মাধ্যমে আপনি একাধিক উপাদান এবং শর্ত অনুসারে স্টাইল তৈরি করতে পারবেন, যা কোড রিইউজযোগ্যতা বৃদ্ধি করে।
- কমপ্লেক্স ডিজাইন সহজ করা: বড় এবং জটিল ডিজাইন কম কোডে তৈরি করতে সাহায্য করে।
- ডায়নামিক ডিজাইন: লুপ ব্যবহার করে, আপনি ডায়নামিকভাবে ডিজাইন তৈরি করতে পারবেন, যেমন ভ্যারিয়েবল সাইজের গ্রিড, রঙের স্কিম, স্পেসিং ইত্যাদি।
সারাংশ
Sass-এর @for, @each, এবং @while ডিরেকটিভগুলি লুপ তৈরির জন্য ব্যবহৃত হয়, যা CSS কোড লেখার প্রক্রিয়াকে সহজ এবং কার্যকরী করে তোলে। এই লুপগুলির মাধ্যমে আপনি ডায়নামিকভাবে CSS তৈরি করতে পারেন, যা আপনার কোডের পুনরাবৃত্তি কমায় এবং মেইনটেনযোগ্যতা বৃদ্ধি করে। আপনার ডিজাইন এবং স্টাইলশিটের সুষ্ঠু এবং কার্যকরীভাবে তৈরি করতে Sass-এর লুপগুলো অত্যন্ত সহায়ক।
Sass এবং লুপ
Sass (Syntactically Awesome Stylesheets) হল একটি শক্তিশালী CSS প্রিপ্রসেসর যা CSS কে আরও শক্তিশালী এবং ডাইনামিক করে তোলে। এটি CSS কোড লেখার জন্য অনেক সুবিধা প্রদান করে, যেমন ভেরিয়েবল, মিক্সিন, ফাংশন, এবং লুপ। লুপ ব্যবহার করে আপনি একাধিক সিলেক্টর বা স্টাইল একত্রে তৈরি করতে পারেন, যা কোডের পুনরাবৃত্তি কমায় এবং CSS লেখার প্রক্রিয়াকে আরও সহজ করে তোলে।
এই গাইডে, আমরা দেখব কিভাবে Sass এর লুপ ব্যবহার করে পুনরাবৃত্তিমূলক CSS কোড তৈরি করা যায়, যা ডেভেলপমেন্টের সময় খুবই কার্যকরী।
Sass-এ লুপের ব্যবহার
Sass এ বিভিন্ন ধরনের লুপ রয়েছে, যেমন @for, @each, এবং @while। এগুলোর মাধ্যমে আপনি CSS স্টাইলের বিভিন্ন উপাদান গুলি পুনরাবৃত্তি করে সহজেই তৈরি করতে পারেন।
১. @for লুপ
@for লুপ ব্যবহার করে নির্দিষ্ট রেঞ্জের মধ্যে স্টাইলস তৈরি করা যায়। এটি একটি শুরুর মান থেকে একটি শেষ মান পর্যন্ত লুপ চালায়।
উদাহরণ:
ধরা যাক, আপনাকে ১ থেকে ৫ পর্যন্ত নম্বরের জন্য ক্লাস তৈরি করতে হবে:
@for $i from 1 through 5 {
.box-#{$i} {
width: $i * 100px;
height: $i * 100px;
background-color: rgba(0, 0, 255, 0.2 * $i);
}
}
এখানে, @for লুপ ব্যবহার করে ১ থেকে ৫ পর্যন্ত ক্লাস তৈরি করা হয়েছে, এবং প্রতিটি ক্লাসের জন্য width, height, এবং background-color নির্ধারণ করা হয়েছে। প্রতিটি ক্লাসে #{$i} সিঙ্কট্যাক্সের মাধ্যমে সংখ্যা যোগ করা হচ্ছে।
আউটপুট:
.box-1 {
width: 100px;
height: 100px;
background-color: rgba(0, 0, 255, 0.2);
}
.box-2 {
width: 200px;
height: 200px;
background-color: rgba(0, 0, 255, 0.4);
}
.box-3 {
width: 300px;
height: 300px;
background-color: rgba(0, 0, 255, 0.6);
}
.box-4 {
width: 400px;
height: 400px;
background-color: rgba(0, 0, 255, 0.8);
}
.box-5 {
width: 500px;
height: 500px;
background-color: rgba(0, 0, 255, 1);
}
এখানে, @for লুপটি ১ থেকে ৫ পর্যন্ত ক্লাস তৈরি করছে, প্রতিটি ক্লাসের জন্য ভিন্ন সাইজ এবং ব্যাকগ্রাউন্ড কালার অ্যাসাইন করা হচ্ছে।
২. @each লুপ
@each লুপটি সাধারণত এমন ডেটা কালেকশন (যেমন অ্যারে বা ম্যাপ) এর উপর লুপ চালানোর জন্য ব্যবহৃত হয়।
উদাহরণ:
ধরা যাক, আমাদের কাছে একটি অ্যারে আছে এবং আমরা এই অ্যারের উপাদানগুলির জন্য CSS ক্লাস তৈরি করতে চাই:
$colors: red, green, blue, yellow;
@each $color in $colors {
.color-#{$color} {
background-color: $color;
color: white;
}
}
এখানে, @each লুপটি $colors অ্যারের উপর কাজ করছে এবং প্রতিটি রঙের জন্য একটি ক্লাস তৈরি করছে। ক্লাসের নামের মধ্যে #{$color} সিঙ্কট্যাক্স ব্যবহার করা হচ্ছে, যা প্রতিটি রঙের নাম ক্লাসের সাথে যুক্ত করছে।
আউটপুট:
.color-red {
background-color: red;
color: white;
}
.color-green {
background-color: green;
color: white;
}
.color-blue {
background-color: blue;
color: white;
}
.color-yellow {
background-color: yellow;
color: white;
}
এখানে, @each লুপটি $colors অ্যারের উপাদানগুলির জন্য ক্লাস তৈরি করেছে এবং প্রতিটি ক্লাসে সেই রঙের ব্যাকগ্রাউন্ড অ্যাসাইন করেছে।
৩. @while লুপ
@while লুপ ব্যবহার করে আপনি একটি নির্দিষ্ট শর্ত পূর্ণ না হওয়া পর্যন্ত কোড পুনরাবৃত্তি করতে পারেন। এটি একটি সাধারণ while loop এর মতো কাজ করে।
উদাহরণ:
ধরা যাক, আপনি কিছু সংখ্যক ক্লাস তৈরি করতে চান যেখানে সংখ্যা কিছু শর্ত পূর্ণ না হওয়া পর্যন্ত বৃদ্ধি পাবে:
$i: 1;
@while $i <= 5 {
.box-#{$i} {
width: $i * 100px;
height: $i * 100px;
}
$i: $i + 1;
}
এখানে, @while লুপটি $i পরিবর্তনশীলের মান ১ থেকে ৫ পর্যন্ত বৃদ্ধি করে এবং প্রতিটি ক্লাসের জন্য সাইজ নির্ধারণ করছে।
আউটপুট:
.box-1 {
width: 100px;
height: 100px;
}
.box-2 {
width: 200px;
height: 200px;
}
.box-3 {
width: 300px;
height: 300px;
}
.box-4 {
width: 400px;
height: 400px;
}
.box-5 {
width: 500px;
height: 500px;
}
এখানে, @while লুপটি $i মানের উপর ভিত্তি করে ক্লাস তৈরি করছে এবং সেগুলির সাইজ সেট করছে।
লুপের মাধ্যমে পুনরাবৃত্তিমূলক CSS তৈরি করার সুবিধা
- কোড পুনঃব্যবহারযোগ্যতা: লুপ ব্যবহার করে আপনি একই ধরনের কোড বারবার লিখতে পারবেন না, ফলে কোড অনেক ছোট ও পরিষ্কার হয়।
- ডাইনামিক স্টাইলস: লুপের মাধ্যমে আপনি ডাইনামিকভাবে সেলেক্টর এবং স্টাইলস তৈরি করতে পারেন, যা ওয়েব পেজের বিভিন্ন উপাদানের জন্য অটোমেটিক্যালি প্রয়োগ করা যায়।
- রক্ষণাবেক্ষণ সহজ করা: যখন কোড কম্প্যাক্ট এবং পরিষ্কার হয়, তখন ভবিষ্যতে পরিবর্তন বা আপডেট করা সহজ হয়।
- প্রদর্শনযোগ্যতা এবং পারফরম্যান্স: স্টাইল কোডের পুনরাবৃত্তি কমিয়ে আনার মাধ্যমে কোডের আকার ছোট হয় এবং পারফরম্যান্স বৃদ্ধি পায়।
সারাংশ
Sass এর লুপ ব্যবহার করে আপনি পুনরাবৃত্তিমূলক CSS তৈরি করতে পারেন, যা কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ সহজ করে তোলে। @for, @each, এবং @while লুপগুলি ব্যবহার করে CSS কোড তৈরি করা সম্ভব যা ডাইনামিক, পরিষ্কার এবং কোডের আকার ছোট করে। এগুলোর মাধ্যমে আপনি আরও কার্যকরী, পরিষ্কার এবং সংগঠিত CSS তৈরি করতে পারেন, যা ওয়েব ডেভেলপমেন্টের সময় এবং প্রচেষ্টা কমিয়ে আনে।
Sass এর Control Directives
Sass (Syntactically Awesome Stylesheets) হল CSS এর একটি শক্তিশালী প্রিপ্রসেসর, যা CSS এর পাশাপাশি আরও অনেক কার্যকরী ফিচার প্রদান করে। এর মধ্যে একটি গুরুত্বপূর্ণ ফিচার হলো Control Directives, যা আপনাকে শর্তাবলী (conditional statements) এবং লুপগুলোর সাহায্যে স্টাইল শীটের মধ্যে লজিক যোগ করতে সক্ষম করে। এর মাধ্যমে আপনি ডাইনামিক স্টাইল শীট তৈরি করতে পারেন যা পুনঃব্যবহারযোগ্য এবং আরও শক্তিশালী।
Sass এর Control Directives মূলত @if, @else, @for, @each, এবং @while এই ডিরেকটিভগুলির মাধ্যমে কাজ করে। এসব ডিরেকটিভগুলি আপনি স্টাইল শীটে লজিক্যাল ফাংশনালিটি যোগ করতে ব্যবহার করতে পারবেন।
১. @if এবং @else
@if এবং @else ডিরেকটিভের মাধ্যমে আপনি শর্ত অনুযায়ী CSS তৈরি করতে পারেন। এটি if-else লজিকের মতো কাজ করে।
উদাহরণ:
$theme: light;
.button {
@if $theme == light {
background-color: white;
color: black;
} @else {
background-color: black;
color: white;
}
}
এখানে, $theme ভেরিয়েবল যদি light হয়, তাহলে .button এর ব্যাকগ্রাউন্ড সাদা এবং টেক্সট কালো হবে, আর অন্যথায় ব্যাকগ্রাউন্ড কালো এবং টেক্সট সাদা হবে।
২. @for লুপ
@for ডিরেকটিভটি একটি নির্দিষ্ট পরিসরের মধ্যে লুপ চালানোর জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি CSS প্রপার্টির জন্য পুনরাবৃত্তি করতে পারেন।
উদাহরণ:
@for $i from 1 to 5 {
.item-#{$i} {
width: 20px * $i;
height: 20px * $i;
}
}
এখানে, @for লুপ ১ থেকে ৫ পর্যন্ত আইটেম তৈরি করবে এবং প্রতিটি আইটেমের আকার বৃদ্ধি পাবে, যেমন:
.item-1এর সাইজ হবে 20px x 20px.item-2এর সাইজ হবে 40px x 40px.item-3এর সাইজ হবে 60px x 60px, এবং আরও।
৩. @each লুপ
@each ডিরেকটিভটি একটি লিস্ট বা অ্যারের উপর লুপ চালানোর জন্য ব্যবহৃত হয়। এটি যখন আপনি কোনো সিরিজ বা কালার স্কিমের জন্য স্টাইল তৈরি করতে চান, তখন খুবই কার্যকরী।
উদাহরণ:
$colors: red, green, blue;
@each $color in $colors {
.#{$color} {
color: $color;
}
}
এখানে, @each লুপটি $colors লিস্টের প্রতিটি ভ্যালুর জন্য একটি ক্লাস তৈরি করবে:
.red { color: red; }.green { color: green; }.blue { color: blue; }
এটি আপনাকে কোড পুনরাবৃত্তি এড়াতে সাহায্য করে।
৪. @while লুপ
@while ডিরেকটিভটি একটি শর্তপূর্ণ লুপ চালানোর জন্য ব্যবহৃত হয়, যা একটি নির্দিষ্ট শর্ত পূর্ণ না হওয়া পর্যন্ত চলে। এটি সাধারণত ডাইনামিক স্টাইল শীট তৈরির জন্য ব্যবহৃত হয়।
উদাহরণ:
$i: 1;
@while $i <= 5 {
.item-#{$i} {
width: 20px * $i;
height: 20px * $i;
}
$i: $i + 1;
}
এখানে, @while লুপটি $i এর মান ৫ পর্যন্ত বাড়িয়ে দিয়ে .item-1 থেকে .item-5 পর্যন্ত ক্লাস তৈরি করবে, এবং প্রতিটি আইটেমের সাইজের মান বাড়াবে।
৫. নেস্টেড কন্ডিশনাল লজিক
Sass এ আপনি শর্ত অনুযায়ী CSS স্টাইল নিয়ে আরও জটিল লজিক তৈরি করতে পারেন, যেখানে একাধিক @if, @else if, এবং @else ডিরেকটিভ ব্যবহার করা হয়।
উদাহরণ:
$theme: light;
$size: large;
.button {
@if $theme == light {
background-color: white;
color: black;
@if $size == large {
padding: 20px;
} @else {
padding: 10px;
}
} @else {
background-color: black;
color: white;
@if $size == large {
padding: 20px;
} @else {
padding: 10px;
}
}
}
এখানে, একদিকে থিম light হলে এবং অন্যদিকে সাইজ large হলে প্যাডিং বড় হবে। অন্যথায়, সাইজ ছোট হবে। একইভাবে, থিম অন্ধকার হলে সেসব সেটিংস প্রয়োগ করা হবে।
সারাংশ
Sass এর Control Directives CSS এর মধ্যে লজিক এবং প্রোগ্রামিং কৌশল যোগ করার জন্য একটি শক্তিশালী উপায়। @if, @else, @for, @each, এবং @while এই ডিরেকটিভগুলির মাধ্যমে আপনি CSS কোড আরও ডাইনামিক এবং শক্তিশালী করতে পারেন। এটি বড় এবং স্কেলেবেল প্রোজেক্টের জন্য খুবই কার্যকরী, যেখানে কোডের পুনরাবৃত্তি এবং জটিলতার স্তর কমাতে সাহায্য করে। Sass এ Control Directives ব্যবহারের মাধ্যমে আপনি কোড আরও সংক্ষিপ্ত, পুনরাবৃত্তিযোগ্য এবং রিডেবল করতে পারেন।
Read more
