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 কোডে শর্তানুযায়ী স্টাইল প্রয়োগ করতে পারেন। এটি শর্তানুযায়ী বিভিন্ন স্টাইল প্রয়োগ করার জন্য একটি শক্তিশালী কৌশল, যা কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা বাড়ায়। এই ডিরেকটিভগুলো আপনাকে কোডের মধ্যে লজিক যোগ করতে এবং ভিন্ন শর্ত অনুযায়ী স্টাইল কাস্টমাইজ করতে সহায়তা করে, যা বিশেষ করে প্রজেক্টের ডিজাইন এবং থিমিংয়ের ক্ষেত্রে খুবই কার্যকরী।
Read more
