SASS-এ নেস্টিং
এই প্রবন্ধে SASS-এ নেস্টিং সম্পর্কে ব্যাখ্যা করা হয়েছে।
আমরা উদাহরণ কোড সহ ধাপে ধাপে SASS নেস্টিং ব্যাখ্যা করব, যাতে আপনার বোঝাপড়া আরও গভীর হয়।
YouTube Video
SASS-এ নেস্টিং
SASS হল CSS-এর জন্য একটি প্রসারিত স্টাইলশীট ভাষা, যা কার্যকরী স্টাইলিংয়ের জন্য অনেক বৈশিষ্ট্য প্রদান করে। এসবের মধ্যে, নেস্টিং বিশেষভাবে উপযোগী একটি বৈশিষ্ট্য, যা CSS-এর স্তরবিন্যাস কাঠামোকে সহজেই দৃশ্যমান করে তোলে।
নেস্টিংয়ের মৌলিক বিষয়
SASS-এ আপনি CSS সিলেক্টরগুলো স্তরবিন্যাস আকারে লিখে কোডকে চাক্ষুষভাবে সাজাতে পারেন। উদাহরণস্বরূপ, আসুন দেখি কীভাবে আপনি নীচের CSS কোডটি নেস্টিং ব্যবহার করে নতুনভাবে লিখতে পারেন।
1/* CSS */
2.nav {
3 background-color: #333;
4}
5.nav ul {
6 margin: 0;
7 padding: 0;
8}
9.nav ul li {
10 list-style: none;
11}
12.nav ul li a {
13 color: #fff;
14 text-decoration: none;
15}
SASS ব্যবহার করে আপনি নীচের মত নেস্টিং এর মাধ্যমে এই কোডটি সংক্ষেপে লিখতে পারেন।
1/* SASS */
2.nav {
3 background-color: #333;
4
5 ul {
6 margin: 0;
7 padding: 0;
8
9 li {
10 list-style: none;
11
12 a {
13 color: #fff;
14 text-decoration: none;
15 }
16 }
17 }
18}
- এই কোডটি SASS-এ নেস্টিং ফিচার ব্যবহার করে নেভিগেশন মেনুর স্টাইলগুলো সংক্ষেপে ও স্তরবিন্যাস আকারে প্রকাশ করে। নেস্টিং ব্যবহারে, অভিভাবক-সন্তান (parent-child) সম্পর্কগুলি চোখে পড়ার মতো স্পষ্ট হয় এবং পড়ার সুবিধা বাড়ে।
অভিভাবক সিলেক্টর উল্লেখ করা (&
)
নেস্টেড স্টাইলে অভিভাবক সিলেক্টর উল্লেখ করতে হলে &
ব্যবহার করুন। এর মাধ্যমে আপনি নির্দিষ্ট অবস্থা বা মডিফায়ারসহ সিলেক্টর তৈরি করতে পারেন।
1.button {
2 background-color: #007bff;
3 color: #fff;
4
5 &:hover {
6 background-color: #0056b3;
7 }
8
9 &:active {
10 background-color: #003f7f;
11 }
12}
- এই কোডটি SCSS-এ
&
ব্যবহার করে অভিভাবক.button
সিলেক্টরের জন্য:hover
ও:active
অবস্থা নির্ধারণ করে।
তৈরিকৃত CSS
1.button {
2 background-color: #007bff;
3 color: #fff;
4}
5.button:hover {
6 background-color: #0056b3;
7}
8.button:active {
9 background-color: #003f7f;
10}
মিডিয়া কুয়েরি নেস্টিং
SASS-এ আপনি মিডিয়া কুয়েরিও নেস্ট করতে পারেন। এতে করে আপনার স্টাইলের প্রাসঙ্গিকতা বজায় রেখে রেস্পন্সিভ ডিজাইন সহজে বাস্তবায়ন করতে পারবেন।
1.container {
2 width: 100%;
3
4 @media (min-width: 768px) {
5 width: 750px;
6 }
7
8 @media (min-width: 1024px) {
9 width: 970px;
10 }
11}
- এই কোডটি
.container
ক্লাসের মধ্যে একটি মিডিয়া কুয়েরি নেস্ট করে, ফলে স্ক্রীনের আকার অনুযায়ী চওড়া পরিবর্তন হয়—এটি রেস্পন্সিভ ডিজাইন সম্ভব করে।
তৈরিকৃত CSS
1.container {
2 width: 100%;
3}
4@media (min-width: 768px) {
5 .container {
6 width: 750px;
7 }
8}
9@media (min-width: 1024px) {
10 .container {
11 width: 970px;
12 }
13}
নেস্টিং সম্পর্কে গুরুত্বপূর্ণ বিষয়গুলো
অতিরিক্ত নেস্টিং আপনার কোডকে অত্যন্ত স্তরবিন্যাসপূর্ণ করে তোলে এবং রক্ষণাবেক্ষণযোগ্যতা কমিয়ে দেয়। নিচের মত গভীর নেস্টিং এড়ানো উচিত।
1.header {
2 .nav {
3 ul {
4 li {
5 a {
6 color: red;
7 }
8 }
9 }
10 }
11}
এই ধরণের কোড অত্যন্ত গভীরভাবে নেস্ট করা হয়েছে, তাই এটি নীচের মতোভাবে পুনর্গঠন করা যেতে পারে।
1.header .nav ul li a {
2 color: red;
3}
ব্যবহারিক উদাহরণ: নেভিগেশন বার
নিচে SASS নেস্টিং ব্যবহার করে নেভিগেশন বার স্টাইলের একটি উদাহরণ দেওয়া হয়েছে।
1.navbar {
2 background-color: #222;
3 color: #fff;
4
5 ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10
11 li {
12 margin-right: 15px;
13
14 a {
15 color: #fff;
16 text-decoration: none;
17
18 &:hover {
19 text-decoration: underline;
20 }
21 }
22 }
23 }
24}
- এই কোডটি SASS নেস্টিং ব্যবহার করে নেভিগেশন বারের তালিকা ও লিঙ্কের স্টাইল এবং হোভার ইফেক্টসহ সকল কিছু সংগঠিত ও সংজ্ঞায়িত করে।
তৈরিকৃত CSS
1.navbar {
2 background-color: #222;
3 color: #fff;
4}
5.navbar ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10}
11.navbar ul li {
12 margin-right: 15px;
13}
14.navbar ul li a {
15 color: #fff;
16 text-decoration: none;
17}
18.navbar ul li a:hover {
19 text-decoration: underline;
20}
সারসংক্ষেপ
SASS-এর নেস্টিং ফিচারটি CSS-এর স্তরবিন্যাস কাঠামো সংক্ষেপে প্রকাশ এবং পাঠযোগ্যতা উন্নত করার জন্য একটি শক্তিশালী টুল। তবে, অতিরিক্ত নেস্টিং এড়ানো এবং কোডটি সঠিকভাবে সংগঠিত করাটা গুরুত্বপূর্ণ।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।