متغیرها (Variables)
«متغیر (Variable)» در CSS یعنی یک نام برای یک مقدار. با تابع var() مقدارش را می خوانیم. بنابراین تغییر رنگ ها و اندازه ها سریع و یک جا انجام می شود. همین باعث کد مرتب تر و قابل فهم تر می شود.
تعریف متغیرهای CSS: سراسری و محلی
متغیر سراسری در :root تعریف می شود و همه جا در دسترس است. متغیر محلی داخل همان سلکتور استفاده می شود. نام متغیر باید با دو خط تیره شروع شود.
:root {\n --primary-bg-color: green;\n}\n\n.note {\n --note-bg: yellow;\n}\nتابع var(): خواندن مقدار متغیر
تابع «var()» مقدار یک متغیر را برمی گرداند. آرگومان دوم اختیاری است و به عنوان مقدار جایگزین استفاده می شود.
/\* شکل کلی \*/\n/* var(--name, fallback) */\nمثال: تنظیم رنگ ها با متغیرهای CSS
در این نمونه دو متغیر سراسری تعریف می کنیم و سپس با var() آن ها را در قوانین مختلف می خوانیم.
:root {\n --primary-bg-color: #1e90ff;\n --primary-color: #ffffff;\n}\n\nbody {\n background-color: var(--primary-bg-color);\n}\n\n.container {\n color: var(--primary-bg-color);\n background-color: var(--primary-color);\n padding: 15px;\n}\n\n.container h2 {\n border-bottom: 2px solid var(--primary-bg-color);\n}\n\n.container .note {\n border: 1px solid var(--primary-bg-color);\n padding: 10px;\n}\nفقط با عوض کردن متغیرها، تم را تغییر بده
حالا فقط مقادیر متغیرها را عوض کن تا ظاهر کل صفحه تغییر کند.
:root {\n --primary-bg-color: #8FBC8F;\n --primary-color: #FFFAF0;\n}\n\nbody {\n background-color: var(--primary-bg-color);\n}\n\n.container {\n color: var(--primary-bg-color);\n background-color: var(--primary-color);\n padding: 15px;\n}\n\n.container h2 {\n border-bottom: 2px solid var(--primary-bg-color);\n}\n\n.container .note {\n border: 1px solid var(--primary-bg-color);\n padding: 10px;\n}\nگام های عملی
- :root را بساز و متغیرها را تعریف کن.
- در قوانین CSS از var() استفاده کن.
- برای تغییر تم، فقط مقدار متغیرها را عوض کن.
جمع بندی سریع
- متغیرهای CSS با -- شروع می شوند.
- :root برای متغیرهای سراسری است.
- var() مقدار متغیر را می خواند.
- آرگومان دوم var() جایگزین است.
- با تغییر یک جا، تم کل صفحه عوض می شود.
برای ادامه طراحی رابط، بخش رابط کاربری را ببین. همچنین برای چیدمان متن، چند ستونه عالی است. اگر ناوبری داری، صفحه بندی را هم بررسی کن.