توضیح در مورد ویژگی‌های سفارشی در CSS
ویژگی‌های سفارشی در CSS که با نام متغیرهای CSS نیز شناخته می‌شوند، ابزاری بسیار قدرتمند برای ساده‌سازی و انعطاف‌پذیری در طراحی صفحات وب هستند. این متغیرها به شما اجازه می‌دهند تا مقادیر خاصی را تعریف کنید و سپس در سراسر CSS خود از آنها استفاده کنید. با استفاده از ویژگی‌های سفارشی می‌توانید به راحتی رنگ‌ها، ابعاد و... را تغییر دهید بدون اینکه نیاز به ویرایش تمام فایل‌های CSS داشته باشید.
برای تعریف یک ویژگی سفارشی، شما باید از دو علامت خط تیره در ابتدای نام آن استفاده کنید. به طور مثال اگر بخواهید رنگ پس‌زمینه‌ای تعریف کنید، می‌توانید آن را به صورت زیر بنویسید:
ویژگی‌های سفارشی مانند متغیرهای زبان برنامه‌نویسی درون‌نویسی عمل می‌کنند و می‌توانند در داخل قواعد CSS به کار برده شوند. این ویژگی به ویژه زمانی مفید است که بخواهید طرح‌بندی یا رنگ‌بندی یک پروژه وب را به سرعت تغییر دهید، بدون اینکه تمام CSS خود را بازنگری کنید.
این قابلیت به خصوص در پروژه‌های بزرگ بسیار کاربردی است، چرا که می‌توان با یک تغییر کوچک در مقدار یک متغیر، ظاهر کلی وب‌سایت را تغییر داد. همچنین این متغیرها از قابلیت وراثت سود می‌برند و اگر در یک عنصر خاص مقدار‌دهی شوند، تمام عناصر فرزند می‌توانند از آن استفاده کنند مگر اینکه آن را بازنویسی کنند.
چگونه از این ویژگی‌ها استفاده کنیم؟
استفاده از ویژگی‌های سفارشی بسیار ساده است. به عنوان مثال برای ایجاد و استفاده از یک متغیر برای رنگ پس‌زمینه، کد زیر را نگاه کنید:
:root {
--main-bg-color: #ffebcd;
}
body {
background-color: var(--main-bg-color);
}توضیح خط به خط کد
:root به معنای ریشه سند است و برای تعریف گسترده‌ترین دایرهٔ استفاده متغیر به کار می‌رود.--main-bg-color نام متغیر سفارشی تعریف شده است که برای رنگ زمینه کاربرد دارد.#ffebcd مقدار رنگ اختصاص داده شده به متغیر اصلی است.background-color: var(--main-bg-color); استفاده از متغیر در تعریف خصوصیت رنگ زمینه بدنه سایت.