নেস্টিং-এ কম্বিনেটরস

নেস্টিং-এ কম্বিনেটরস

এই লেখাটি নেস্টিং-এ কম্বিনেটরস সম্পর্কে ব্যাখ্যা করে।

আমরা দেখাবো কিভাবে 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 কম্বিনেটরস সিলেক্টরদের মধ্যে সম্পর্ক নির্ধারণ করে। নিচে কম্বিনেটরসের প্রধান ধরনগুলো উল্লেখ করা হলো।

  1. ডিসেনডেন্ট সিলেক্টর (স্পেস) একটি ডিসেনডেন্ট সিলেক্টর মূলত parent এলিমেন্টের ভিতরের সব শাখা এলিমেন্ট (descendant) টার্গেট করে। উদাহরণ: .parent .child

  2. চাইল্ড সিলেক্টর (> ) চাইল্ড সিলেক্টর শুধুমাত্র সরাসরি চাইল্ড এলিমেন্টকেই টার্গেট করে। উদাহরণ: .parent > .child

  3. অ্যাডজেসেন্ট সিলেক্টর (+) অ্যাডজেসেন্ট সিলেক্টর, কারো ঠিক পরে থাকা সিবলিং এলিমেন্টকে টার্গেট করে। উদাহরণ: .sibling1 + .sibling2

  4. জেনারাল সিবলিং সিলেক্টর (~) জেনারাল সিবলিং সিলেক্টর সব পরবর্তী সম-স্তরের সিবলিং এলিমেন্ট টার্গেট করে। উদাহরণ: .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 লিখতে পারবেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video