تو دنیای برنامهنویسی وب، یکی از ویژگیهای خیلی جالب و جذابی که در سالهای اخیر به CSS اضافه شده، قابلیت Nesting یا همون تو در تو نوشتن استایلهاست. شاید برای کسی که تازه وارد باشه، این ویژگی یه مقدار گنگ و ناشناخته به نظر بیاد، ولی باور کنید که چقدر از پیچیدگی کار با CSS جلوگیری میکنه.
یه زمانی بود که برای هر تغییر کوچکی کلی خط کد CSS باید مینوشتید و این موضوع باعث میشد فایلهای استایلتون شلوغ و ناگویا بشه. با اومدن ویژگی Nesting به دنیای CSS، میتونید استایلهاتون رو به صورت تو در تو بنویسید که همونطوری که تو زبانهایی مثل Sass و Less استفاده میشد.
چیزی که شاید براتون تعجبآور باشه اینه که الان میتونید از این ویژگی مستقیما در Visual Studio 2022 استفاده کنید. Visual Studio 2022 از قابلیت پشتیبانی از CSS Nesting رو به عنوان قسمتی از توسعه کاربردی تر و راحتتر فایلهای CSS اضافه کرده.
در ادامه، یه مثال ساده از CSS Nesting رو با هم میبینیم تا به خوبی بفهمیم چطور میشه از این قابلیت بهره برد:
.container {
color: black;
<header> {
background-color: blue;
h1 {
font-size: 24px;
}
}
}
این یه مثال ساده بود. تو این مثال، میبینید که چطور المان داخل یک دیگه نوشته میشه و چقدر خواناتره. حالا در ادامه به توضیح کد بالا میپردازیم:
.container
:
این کلاس به عنوان کانتینر اصلی در نظر گرفته شده که استایلهای اولیه رو داره مثل رنگ متن.<header>
:
داخل کلاس .container قرار داره و استایل خاص خودش رو داره مثل رنگ پسزمینه.h1
:
این المان هم دوباره داخل بخش header تعریف شده و فقط به قسمت خاصی از استایله که فونت سایز رو تعیین میکنه.