SASS `@at-root`
এই নিবন্ধে SASS-এর @at-root ব্যাখ্যা করা হয়েছে।
আমরা ধাপে ধাপে @at-root-এর মৌলিক ব্যবহার থেকে শুরু করে উন্নত উদাহরণ পর্যন্ত সবকিছু কভার করব।
YouTube Video
SASS-এর @at-root সম্পর্কে
@at-root হলো SASS প্রদত্ত একটি ডিরেক্টিভ, যা নেস্ট করা সিলেক্টর বা প্রপার্টিগুলোকে বর্তমান নেস্টিং থেকে প্যারেন্ট স্কোপে সরাতে ব্যবহৃত হয়। এই ফিচারটি ব্যবহার করে আপনি নেস্টিংয়ের গভীরতা নিয়ন্ত্রণ করতে পারেন এবং উদ্দেশ্যমতো CSS আরও দক্ষতার সঙ্গে তৈরি করতে পারেন।
@at-root-এর মৌলিক ব্যবহার
SASS-এর নেস্টিং কোডকে আরও পাঠযোগ্য করে, কিন্তু অতিরিক্ত গভীর নেস্টিং অনিচ্ছাকৃত CSS তৈরি করতে পারে। @at-root ব্যবহার করে আপনি নির্দিষ্ট কোড ব্লকগুলোকে নেস্টিং গঠন থেকে বাদ দিতে পারেন।
মূল সিনট্যাক্স
1@at-root {
2 // Code to be output at the parent (root) scope
3}উদাহরণ ব্যবহার
1.nav {
2 color: blue;
3 @at-root {
4 .nav-item {
5 color: red;
6 }
7 }
8}কম্পাইল করা CSS
1.nav {
2 color: blue;
3}
4.nav-item {
5 color: red;
6}@at-root-এর কারণে.nav-item.nav-এর বাইরে আউটপুট হয়।
নেস্টেড সিলেক্টরে @at-root
গভীর নেস্টিংয়ের মধ্যেও, @at-root ব্যবহার করে আপনি নির্দিষ্ট সিলেক্টরগুলোকে রুট লেভেলে সরাতে পারেন। এর মাধ্যমে জটিল কাঠামোর মধ্যেও নিয়ন্ত্রিত CSS আউটপুট করা যায়।
উদাহরণ ব্যবহার
1.card {
2 background: white;
3 .card-header {
4 color: black;
5 @at-root .card-title {
6 font-size: 20px;
7 }
8 }
9}কম্পাইল করা CSS
1.card {
2 background: white;
3}
4.card .card-header {
5 color: black;
6}
7.card-title {
8 font-size: 20px;
9}@at-rootব্যবহার করার ফলে.card-title.card-header-এর বাইরে আউটপুট হয়।
আর্গুমেন্ট সহ @at-root
আর্গুমেন্ট নির্দিষ্ট করে @at-root-কে আরও নমনীয়ভাবে নিয়ন্ত্রণ করা যায়।
without আর্গুমেন্ট
without আর্গুমেন্ট ব্যবহার করলে আউটপুট নির্দিষ্ট স্কোপগুলোকে উপেক্ষা করে। অর্থাৎ, আপনি প্যারেন্ট রুল বা মিডিয়া কুয়ারিগুলো সরিয়ে দিতে পারেন।
উদাহরণ ব্যবহার
1.nav {
2 @media (min-width: 768px) {
3 &__item {
4 @at-root (without: media) {
5 color: red;
6 }
7 }
8 }
9}কম্পাইল করা CSS
1.nav__item {
2 color: red;
3}- এই ক্ষেত্রে,
@at-root (without: media)মিডিয়া কুয়ারির স্কোপটি বাদ দেয়, এবং.nav__itemরুটে আউটপুট হয়।
with আর্গুমেন্ট
with ব্যবহার করলে আউটপুটে কেবল নির্দিষ্ট স্কোপগুলোই রাখা হয়। নির্দিষ্ট স্কোপ সংরক্ষণ করে রুটে আউটপুট দিতে চাইলে এটি উপযোগী।
উদাহরণ ব্যবহার
1.nav {
2 &__item {
3 @media (min-width: 768px) {
4 @at-root (with: media) {
5 &-large {
6 font-size: 18px;
7 }
8 }
9 }
10 }
11}কম্পাইল করা CSS
1@media (min-width: 768px) {
2 .nav__item-large {
3 font-size: 18px;
4 }
5}@at-root (with: media)মিডিয়া কুয়ারির কাঠামো অক্ষুণ্ণ রেখে সিলেক্টরকে রুটে সরিয়ে দেয়।
একাধিক শর্ত নির্দিষ্ট করা
আপনি এছাড়াও স্পেস দিয়ে আলাদা করে একই সঙ্গে একাধিক স্কোপ নির্দিষ্ট করতে পারেন।
উদাহরণ ব্যবহার
1.wrapper {
2 @media (min-width: 600px) {
3 @at-root (without: rule media) {
4 .global-style {
5 color: green;
6 }
7 }
8 }
9}কম্পাইল করা CSS
1.global-style {
2 color: green;
3}- এই উদাহরণে
rule(সাধারণ সিলেক্টর) এবংmedia(মিডিয়া কুয়ারি) উভয়ই বাদ দেওয়া হয়েছে, তাই.global-styleকোনো স্কোপের অধীনে পড়ে না এবং সম্পূর্ণভাবে রুট লেভেলে আউটপুট হয়। জটিল নেস্টিংয়ের মধ্যেও ইচ্ছাকৃতভাবে গ্লোবাল স্টাইল সংজ্ঞায়িত করতে চাইলে এটি উপকারী।
মিডিয়া কুয়ারির সাথে মিলিয়ে ব্যবহার
@at-root ব্যবহার করে, আপনি মিডিয়া কুয়েরির ভিতর থেকে রুট-স্তরের স্টাইল আউটপুট করতে পারেন। এটি আপনাকে কম্পোনেন্ট স্তরে রেসপনসিভ ডিজাইন সংজ্ঞায়িত করতে দেয়।
উদাহরণ ব্যবহার
1.container {
2 @media (min-width: 768px) {
3 @at-root {
4 .container-large {
5 width: 80%;
6 }
7 }
8 }
9}কম্পাইল করা CSS
1.container-large {
2 width: 80%;
3}@at-rootব্যবহার করে মিডিয়া কুয়ারির ভেতর থেকেও রুট-লেভেলের স্টাইল আউটপুট করতে পারেন। এর ফলে প্রতিটি ব্রেকপয়েন্টের জন্য স্বতন্ত্র গ্লোবাল স্টাইল নির্ধারণ করা সহজ হয়।
@at-root-এর ব্যবহারক্ষেত্র
নির্দিষ্ট শর্তে রুট লেভেলে স্টাইল আউটপুট করতে চাইলে @at-root বেশ কার্যকর। কম্পোনেন্টের ভেতরে মিডিয়া কুয়ারি বা থিম-নির্দিষ্ট স্টাইল সামলাতে এটি বিশেষভাবে সহায়ক।
কম্পোনেন্ট ও থিম আলাদা করা
@at-root ব্যবহার করে মিডিয়া কুয়ারির ভেতর থেকেও স্বতন্ত্র গ্লোবাল ক্লাস তৈরি করা যায়। এতে প্রতি কম্পোনেন্টে থিম ও স্টেটগুলো সাজানো সহজ হয়।
উদাহরণ ব্যবহার
1.card {
2 background: white;
3 color: black;
4
5 @media (prefers-color-scheme: dark) {
6 @at-root (with: media) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11 }
12 }
13}কম্পাইল করা CSS
1.card {
2 background: white;
3 color: black;
4}
5
6@media (prefers-color-scheme: dark) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11}- এই উদাহরণে,
.card-এর ভেতরে ডার্ক থিমের স্টাইল নির্ধারণ করার সময়,@at-rootআলাদা একটি.card-darkক্লাস তৈরি করে। এর ফলে ভিন্ন ভিন্ন থিমে নমনীয়ভাবে ক্লাস বদলাতে পারেন।
নোটস
@at-root ব্যবহার করার সময় নিচের বিষয়গুলো মাথায় রাখুন।
-
অতিরিক্ত ব্যবহার এড়িয়ে চলুন
@at-rootশক্তিশালী, কিন্তু এটি অতিরিক্ত ব্যবহার করলে আপনার নেস্টিংয়ের উদ্দেশ্য অস্পষ্ট হয়ে যেতে পারে। -
উদ্দেশ্য পরিষ্কার করুন কেন
@at-rootব্যবহার করছেন তা মন্তব্যে রেখে দিলে অন্যান্য ডেভেলপারদের বুঝতে সুবিধা হয়। -
স্কোপের সামঞ্জস্যতায় যত্নবান হোন আউটপুটকে রুটে সরালে স্টাইল ডিপেনডেন্সিতে পরিবর্তন আসতে পারে। এটি কোন কোন উপাদানের ক্ষেত্রে প্রযোজ্য তা পরিষ্কার রাখুন।
-
অন্যান্য SASS ফিচারের সাথে একত্রে ব্যবহার করুন
@at-root-কে@mixinএবং@function-এর সাথে মিলিয়ে ব্যবহার করলে আরও নমনীয় CSS ডিজাইন করা যায়।
সারসংক্ষেপ
{^ i18n_speak
@at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।