متغیرهای CSS و ساخت سیستم رنگ و اندازه | درس 45 + پروژه درس

در درس 44 و ساخت صفحه کامل واکنش گرا اجزای صفحه را کنار هم قرار دادیم. حالا فرض کنید کارفرما رنگ اصلی سایت را تغییر می دهد. اگر همان کد رنگ در دکمه، تیتر کارت، لینک و کادر ده ها بار نوشته شده باشد، اصلاح آن کند و خطاپذیر خواهد بود. متغیرهای CSS به ما اجازه می دهند تصمیم های مشترک طراحی را یک بار نام گذاری کنیم و در بخش های مختلف به کار ببریم.

در درس 45، یک سیستم کوچک رنگ و اندازه می سازیم: صفحه رنگ اصلی مشترک دارد، یک بخش رنگ محلی خودش را حفظ می کند و تمرین پایانی بدون تکرار استایل کارت حل می شود. هدف فقط کوتاه کردن کد نیست؛ می خواهیم رابطه میان تصمیم طراحی و ظاهر صفحه روشن باشد. پیش نیاز این درس، آشنایی با انتخابگرها، آبشار، رنگ و واحدهای اندازه گیری است.

متغیر CSS چیست و چه مسئله ای را حل می کند؟

نام دقیق این قابلیت «ویژگی سفارشی» یا Custom Property است. نام آن با دو خط تیره شروع می شود و مقدارش با تابع var() مصرف می شود. این ویژگی ها بخشی از خود CSS هستند؛ برای پروژه امروز به جاوااسکریپت، ابزار ساخت یا نصب بسته نیاز نداریم. مرورگر هنگام محاسبه استایل هر عنصر، مقدار مناسب را با توجه به محدوده و قواعد آبشار پیدا می کند.

به جای نامی مثل --blue، می توانیم نقش رنگ را با --color-accent بیان کنیم. اگر رنگ شاخص بعدا سبز شد، نام متغیر همچنان درست است. این مقادیر نام گذاری شده، یک مجموعه ساده از توکن های طراحی می سازند. لازم نیست برای هر مقدار تک استفاده متغیر بسازید؛ رنگ برند، فاصله مشترک، شعاع کارت و عرض محتوای تکرارشونده نقطه شروع خوبی هستند.

تعریف مقادیر مشترک در :root

انتخابگر :root در سند HTML به عنصر ریشه اشاره می کند. تعریف های زیر را در فایل tokens.css قرار می دهیم تا عناصر صفحه بتوانند از آن ها ارث ببرند. توجه کنید مقدار اندازه باید واحد مناسب داشته باشد؛ عدد تنها برای هر ویژگی قابل قبول نیست. اگر تفاوت rem و px را فراموش کرده اید، درس واحدهای اندازه گیری CSS را مرور کنید.

:root {
 --color-page: #eff5fa;
 --color-surface: #ffffff;
 --color-text: #15364b;
 --color-accent: #075985;
 --color-on-accent: #ffffff;
 --color-border: #b8d2df;
 --color-focus: #9a3412;
 --space-1: 0.5rem;
 --space-2: 1rem;
 --space-3: 1.5rem;
 --space-4: 2rem;
 --radius-card: 1rem;
 --content-max: 70rem;
 --section-space: 2rem;
}

نام ها را با یک الگوی ثابت انتخاب کرده ایم: پیشوند رنگ برای رنگ ها، فاصله برای فاصله ها و نام روشن برای عرض محتوا. این نام گذاری الزام مرورگر نیست، اما خواندن فایل را آسان می کند. در این پروژه رنگ سطح کارت از رنگ زمینه صفحه جداست؛ بنابراین تغییر زمینه لزوما کارت را تغییر نمی دهد. برای مرور فرمت های رنگ و پس زمینه، درس رنگ ها و پس زمینه ها مفید است.

مصرف متغیر در کارت، دکمه و فاصله ها

تعریف متغیر به تنهایی ظاهر صفحه را عوض نمی کند. باید آن را در مقدار یک ویژگی مصرف کنیم. نمونه زیر بخشی از استایل واقعی پروژه است؛ کارت از رنگ سطح، کادر، فاصله و شعاع مشترک استفاده می کند و رنگ دکمه مستقیما از متغیر رنگ شاخص خوانده می شود.

.card {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.card h3 {
  color: var(--color-accent);
}
.button {
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-button, 0.5rem);
}

اکنون تغییر --space-3 از 1.5rem به 2rem فاصله داخلی کارت ها و فاصله میان کارت های پروژه را با هم تغییر می دهد. این هماهنگی عمدی است. اگر دو بخش باید مستقل تغییر کنند، بهتر است متغیرهای جدا داشته باشند. برای درک اثر padding روی اندازه کارت، درس مدل جعبه ای CSS را ببینید.

نام متغیرها به بزرگی و کوچکی حروف حساس است؛ --color-accent و --Color-Accent دو نام متفاوت هستند. خطای تایپی را با افزودن مقدارهای پراکنده پنهان نکنید. در ابزار توسعه مرورگر، عنصر را انتخاب کنید و ببینید تعریف متغیر از کدام قاعده به آن رسیده است.

محدوده و ارث بری: یک بخش با رنگ متفاوت

متغیرهای معمولی تعریف شده با دو خط تیره، به صورت پیش فرض ارث می رسند. می توانیم روی والد یک بخش مقدار تازه ای تعریف کنیم؛ فرزندان همان بخش آن را دریافت می کنند، اما بخش های همسایه تغییر نمی کنند. در پروژه، بخش پیشنهاد ویژه کلاس promo دارد:

.promo {
  --color-accent: #9a3412;
  --color-border: #e9b29c;
}

عنوان کارت و دکمه داخل این بخش نارنجی می شوند، زیرا هر دو همان متغیر مشترک را مصرف می کنند. کارت های بیرون بخش همچنان آبی هستند. حالا رنگ ریشه را سبز کنید؛ کارت های عمومی سبز می شوند، ولی پیشنهاد ویژه نارنجی می ماند. این آزمایش تفاوت «تعریف عمومی» و «بازتعریف محلی» را قابل مشاهده می کند.

متغیرها از قواعد آبشار جدا نیستند. اگر چند قاعده روی یک عنصر همان متغیر را تعریف کنند، اولویت انتخابگر و ترتیب و دیگر قواعد آبشار تعیین کننده هستند. مقدار مشخص شده روی خود عنصر نیز صرفا با یک مقدار ارث رسیده رقابت انتخابگری ندارد؛ ارث بری زمانی وارد می شود که مقدار مربوط از مسیر قواعد خود عنصر تامین نشده باشد. برای جزئیات، درس انتخابگرهای CSS و درس آبشار و اولویت را مرور کنید.

مقدار جایگزین در var دقیقا چه می کند؟

در دکمه پروژه، --radius-button عمدا تعریف نشده است. بخش دوم var(--radius-button, 0.5rem) باعث می شود شعاع دکمه مقدار جایگزین را بگیرد. حالا این متغیر را در ریشه با مقدار 1rem تعریف کنید؛ دکمه به جای مقدار جایگزین از مقدار تعریف شده استفاده می کند. پس از آزمایش، تغییر را برگردانید.

مقدار جایگزین، اعتبارسنج همه نوع مقدار نیست. مثال زیر اشتباه رایجی را نشان می دهد:

.example {
  --label-color: 20px;
  color: var(--label-color, #15364b);
}

متغیر وجود دارد و مقدار آن برای یک ویژگی سفارشی ثبت شده است؛ اما 20px رنگ معتبر نیست. بنابراین نباید انتظار داشته باشید رنگ جایگزین اجرا شود. اعلان رنگ هنگام محاسبه مقدار نامعتبر می شود و ویژگی color طبق قواعد مربوط، از جمله ارث بری، رفتار می کند. حتی قرار دادن یک اعلان رنگ قبلی در همان قاعده تضمین نمی کند که در این حالت همان اعلان قبلی دوباره برنده شود. راه درست، اصلاح نوع مقدار متغیر و بررسی نتیجه در مرورگر است.

ساخت مقیاس فاصله و استفاده از calc

داشتن چند فاصله مشخص به صفحه ریتم می دهد. در پروژه، فاصله های کوچک تا بزرگ را با rem تعریف کرده ایم تا با اندازه قلم ریشه ارتباط داشته باشند. برای اندازه متن و خوانایی، درس تایپوگرافی CSS را هم در نظر بگیرید. مقدارهای انتخاب شده قانون همیشگی طراحی نیستند؛ باید با محتوا و اندازه صفحه سازگار باشند.

اگر بخواهید مقدار جدیدی را از یک واحد پایه محاسبه کنید، عمل ریاضی را داخل calc بنویسید. نمونه زیر یک الگوی مستقل برای آزمایش است و جایگزین اجباری فایل پروژه نیست:

:root {
  --space-unit: 0.5rem;
}
.example {
  padding: calc(var(--space-unit) * 3);
}

نوشتن ضرب به صورت متن ساده بیرون calc، محاسبه معتبر برای padding تولید نمی کند. همچنین یک مقیاس بیش از حد پیچیده برای صفحه کوچک لازم نیست. ابتدا تکرار واقعی را پیدا کنید؛ سپس برای آن نام مناسب بگذارید. برای جلوه های تکمیلی نیز می توانید درس کادر و سایه را مرور کنید.

متغیرها در طراحی واکنش گرا

در پروژه فاصله عمودی بخش ها روی صفحه کوچک کمتر است. در نمایشگر عریض فقط متغیر مربوط را بازتعریف می کنیم و قاعده section همان می ماند:

section {
  margin-block: var(--section-space);
}
@media (min-width: 800px) {
  :root {
    --section-space: 3rem;
  }
}

خود شرط media query با یک مقدار واقعی نوشته شده است. متغیرهای معمولی CSS را نمی توان با var در شرط عرض media query مصرف کرد. استفاده از متغیر در مقدار یک اعلان داخل آن مجاز است. همچنین var جای نام ویژگی یا انتخابگر را نمی گیرد. برای انتخاب نقطه شکست بر اساس نیاز محتوا، درس مدیا کوئری و نقاط شکست را ببینید.

اجرای پروژه و آزمایش مرحله به مرحله

پس از استخراج ZIP، فایل index.html را باز کنید. فونت ها محلی هستند و فایل های CSS کنار صفحه قرار دارند. tokens.css پیش از style.css بارگذاری می شود تا تصمیم های مشترک از قواعد ظاهری جدا بمانند. پاسخ تمرین به صورت پیش فرض به صفحه متصل نیست. این ترتیب به خوانایی کمک می کند؛ البته نتیجه نهایی همچنان تابع قواعد آبشار و محدوده هر اعلان است.

1. بدون تغییر، تفاوت کارت های عمومی آبی و بخش پیشنهاد ویژه نارنجی را مشاهده کنید.
2. در tokens.css مقدار رنگ شاخص را به #166534 تغییر دهید. تیتر و دکمه کارت های عمومی باید سبز شوند و بخش محلی نارنجی بماند.
3. مقدار space-3 را افزایش دهید و فاصله داخلی کارت و فاصله شبکه را مقایسه کنید. سپس مقادیر اولیه را برگردانید.
4. عرض صفحه را اطراف 800px تغییر دهید و فاصله میان بخش ها را بررسی کنید؛ ساختار کارت ها نیز باید بدون خروج از عرض صفحه تنظیم شود.
5. با کلید Tab بین لینک ها حرکت کنید و نمایش کادر فوکوس را ببینید. بعد متن یکی از کارت ها را طولانی تر کنید تا وابستگی چیدمان به متن کوتاه آشکار شود.

رنگ متن روی دکمه با متغیر جداگانه تعریف شده است، اما تغییر رنگ زمینه به تنهایی خوانایی را تضمین نمی کند. اگر زمینه را روشن کردید، ترکیب رنگ متن و زمینه را دوباره بررسی کنید. حالت فوکوس و تشخیص لینک نیز نباید فقط به تفاوت جزئی رنگ وابسته باشد؛ در پروژه، لینک ها زیرخط دارند و فوکوس کادر مشخص دارد. درس شبه کلاس ها پیش زمینه این بخش است.

تمرین: کارت بنفش بدون کپی کردن استایل

بخش تمرین کلاس exercise دارد. فقط در همین محدوده رنگ شاخص را بنفش با مقدار #6b21a8 و شعاع کارت را 1.5rem کنید. نباید قواعد card یا button را دوباره بنویسید و نباید مقدارهای عمومی ریشه را تغییر دهید. معیار موفقیت این است که کارت تمرین بنفش شود، کارت های عمومی آبی بمانند و پیشنهاد ویژه همچنان نارنجی باشد.

ابتدا راه حل خودتان را در انتهای style.css امتحان کنید. برای مقایسه، تغییر آزمایشی خود را حذف کنید و فایل solution.css را بعد از style.css در بخش head متصل کنید:

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="solution.css">

پاسخ تمرین فقط همین دو بازتعریف محلی است:

.exercise {
 --color-accent: #6b21a8;
 --radius-card: 1.5rem;
}

اگر کل صفحه بنفش شد، احتمالا متغیر را روی ریشه نوشته اید. اگر دکمه تغییر کرد ولی تیتر تغییر نکرد، بررسی کنید تیتر واقعا color را از همان متغیر می خواند. اگر هیچ تغییری ندیدید، مسیر فایل، نام کلاس و بزرگی حروف نام متغیر را کنترل کنید. ابزار توسعه و بخش Computed برای پیدا کردن مقدار نهایی و محدوده تامین آن مناسب است.

پرسش های متداول

آیا متغیر CSS همان متغیر زبان برنامه نویسی است؟

رفتار آن تابع عناصر، ارث بری و آبشار CSS است. برای استفاده از آن نیاز به اجرای اسکریپت نداریم و مقدار یک نام می تواند در دو بخش صفحه متفاوت باشد.

آیا همه متغیرها باید در :root باشند؟

خیر. تصمیم های عمومی را آنجا قرار دهید و مقادیری را که فقط به یک جزء یا بخش تعلق دارند، در همان محدوده تعریف کنید.

آیا با متغیرها می توان تم ساخت؟

بله، با تغییر مجموعه رنگ ها در یک محدوده می توان ظاهر متفاوت ساخت. پروژه امروز فقط بازتعریف محلی را آموزش می دهد و دکمه تغییر تم یا ذخیره ترجیح کاربر ندارد.

چرا پاسخ تمرین از ابتدا فعال نیست؟

تا امکان مشاهده حالت اولیه و حل مستقل تمرین وجود داشته باشد. فایل پاسخ جداست و با اتصال صریح فعال می شود.

آیا تغییر یک رنگ برای آماده شدن سایت کافی است؟

خیر. باید خوانایی متن، حالت فوکوس، هماهنگی بخش های محلی، نمایش موبایل و محتوای بلند را هم بررسی کنید. متغیرها مدیریت تصمیم ها را آسان می کنند و جای ارزیابی طراحی را نمی گیرند.

نتیجه این درس

اکنون می توانید مقدار مشترک را تعریف کنید، با var مصرف کنید و بدون تکرار قواعد ظاهری آن را در یک بخش بازتعریف کنید. پروژه را با سه آزمایش رنگ عمومی، رنگ محلی و فاصله مشترک مرور کنید؛ اگر بتوانید پیش از اجرای تغییر، بخش های تحت تاثیر را مشخص کنید، مفهوم محدوده و ارث بری را درست فهمیده اید.

منبع فنی برای مطالعه بیشتر: راهنمای رسمی MDN درباره ویژگی های سفارشی CSS.

درس قبلی: ساخت فوتر و چیدمان کامل صفحه واکنش گرا

درس بعدی: توابع کاربردی CSS | درس 46