নেস্টিং-এ কম্বিনেটরস
এই লেখাটি নেস্টিং-এ কম্বিনেটরস সম্পর্কে ব্যাখ্যা করে।
আমরা দেখাবো কিভাবে SASS-এ নেস্টিং-এর মধ্যে কম্বিনেটরস ব্যবহার করতে হয় এবং ধাপে ধাপে বোঝানোর জন্য নমুনা কোড প্রদান করবো।
YouTube Video
নেস্টিং-এ কম্বিনেটরস
SASS-এ, আপনি parent-child সম্পর্কের ভিত্তিতে CSS সিলেক্টর সংক্ষেপে লিখতে পারেন, তবে descendant ও adjacent সিলেক্টরের মত কম্বিনেটরস সঠিকভাবে ব্যবহার করতে বাড়তি মনোযোগ দেওয়া প্রয়োজন।
নেস্টিং-এর মৌলিক ধারণা
SASS-এ, parent সিলেক্টরের ভিতরে child সিলেক্টর নেস্ট করে, আপনি CSS-এ parent-child সম্পর্ক স্পষ্ট ও সংক্ষেপে প্রকাশ করতে পারেন।
উদাহরণ: মৌলিক নেস্টিং
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}
কম্পাইল্ড CSS
1.nav ul li {
2 color: blue;
3}
প্যারেন্ট সিলেক্টর রেফারেন্স (&
)
SASS-এ &
চিহ্ন বর্তমান প্যারেন্ট সিলেক্টরকে রেফারেন্স করতে ব্যবহৃত হয়।
কম্বিনেটরস ও &
একত্রে ব্যবহার
&
ব্যবহার করে আপনি আরও নমনীয় সিলেক্টর তৈরী করতে পারেন।
উদাহরণ
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}
কম্পাইল্ড CSS
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}
&
-এর জন্য সংক্ষিপ্ত চিহ্ন
SASS-এ, যখন কোনো কম্বিনেটর একটি সিলেক্টরের শুরুতে রাখা হয়, তখন অভিভাবক সিলেক্টর স্বয়ংক্রিয়ভাবে যোগ হয়, তাই আপনি &
বাদ দিতে পারেন।
যেসব ক্ষেত্রে বাদ দেওয়া সম্ভব
উদাহরণস্বরূপ, আপনি যখন + .item
লেখেন, SASS অভ্যন্তরীণভাবে এটিকে & + .item
হিসেবে ব্যাখ্যা করে এবং স্বয়ংক্রিয়ভাবে অভিভাবক সিলেক্টরের সাথে সংযুক্ত করে।
উদাহরণ
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}
কম্পাইল্ড CSS
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}
কম্বিনেটরস-এর সংক্ষিপ্ত পরিচিতি
CSS কম্বিনেটরস সিলেক্টরদের মধ্যে সম্পর্ক নির্ধারণ করে। নিচে কম্বিনেটরসের প্রধান ধরনগুলো উল্লেখ করা হলো।
-
ডিসেনডেন্ট সিলেক্টর (স্পেস) একটি ডিসেনডেন্ট সিলেক্টর মূলত parent এলিমেন্টের ভিতরের সব শাখা এলিমেন্ট (descendant) টার্গেট করে। উদাহরণ:
.parent .child
-
চাইল্ড সিলেক্টর (
>
) চাইল্ড সিলেক্টর শুধুমাত্র সরাসরি চাইল্ড এলিমেন্টকেই টার্গেট করে। উদাহরণ:.parent > .child
-
অ্যাডজেসেন্ট সিলেক্টর (
+
) অ্যাডজেসেন্ট সিলেক্টর, কারো ঠিক পরে থাকা সিবলিং এলিমেন্টকে টার্গেট করে। উদাহরণ:.sibling1 + .sibling2
-
জেনারাল সিবলিং সিলেক্টর (
~
) জেনারাল সিবলিং সিলেক্টর সব পরবর্তী সম-স্তরের সিবলিং এলিমেন্ট টার্গেট করে। উদাহরণ:.sibling1 ~ .sibling2
SASS-এ কিভাবে কম্বিনেটরস ব্যবহার করবেন
ডিসেনডেন্ট সিলেক্টর (স্পেস)
SASS নেস্টিং-এ, স্পেস ডিসেনডেন্ট সিলেক্টর স্বয়ংক্রিয়ভাবে প্রয়োগ হয়।
উদাহরণ
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}
কম্পাইল্ড CSS
1.container .header .title {
2 font-size: 20px;
3}
চাইল্ড সিলেক্টর (>
)
আপনি যদি চাইল্ড সিলেক্টর ব্যবহার করতে চান, সেক্ষেত্রে SASS কোডে >
স্পষ্টভাবে লিখুন।
উদাহরণ
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}
কম্পাইল্ড CSS
1.container > .header > .title {
2 font-size: 20px;
3}
অ্যাডজেসেন্ট সিলেক্টর (+
)
সরাসরি পরবর্তী সিবলিং এলিমেন্টকে স্টাইল করতে +
ব্যবহার করুন।
উদাহরণ
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}
কম্পাইল্ড CSS
1.item + .item {
2 margin-top: 10px;
3}
জেনারাল সিবলিং সিলেক্টর (~
)
একই স্তরের সব পরবর্তী সিবলিংকে স্টাইল করতে ~
ব্যবহার করুন।
উদাহরণ
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}
কম্পাইল্ড CSS
1.alert ~ .alert {
2 border-top: 1px solid red;
3}
নেস্টিং-এর সাথে ছদ্ম-ক্লাস ও ছদ্ম-এলিমেন্ট
SASS-এ ছদ্ম-ক্লাস ও ছদ্ম-এলিমেন্ট সহজেই লেখা যায়।
উদাহরণ
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}
কম্পাইল্ড CSS
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}
প্রায়োগিক উদাহরণ
নিচে একাধিক কম্বিনেটরস যুক্ত জটিল স্টাইলের উদাহরণ দেওয়া হলো।
SASS কোড
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}
কম্পাইল্ড CSS
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}
সারসংক্ষেপ
আপনি যদি SASS-এ নেস্টিং এবং কম্বিনেটরস সঠিকভাবে বোঝেন, তাহলে আরও সংক্ষিপ্ত ও পড়তে সহজ CSS লিখতে পারবেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।