آشنایی با انواع متغیرها و کاربرد آنها در Css

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

در این مقاله، ابتدا با متغیرها در CSS که در انگلیسی “CSS Variables” شناخته می‌شوند، آشنا می‌شویم. سپس در ادامه جزئیات دیگر این مبحث را شامل اهمیت استفاده از متغیرها، کاربرد آن‌ها، ویژگی‌ها و غیره تشریح خواهیم کرد.

آشنایی با متغیرها در Css

این بخش را با یک مثال بسیار ساده شروع می‌کنیم:

فرض کنید که باید کد رنگی #003bb2 را در ۲۰ قسمت مختلف یک صفحه سایت استفاده کنید. در این حالت کدام گزینه را ساده‌تر می‌دانید؟

1. ۲۰ بار نوشتن کد رنگی یا کپی کردن آن؟
2. ذخیره کد رنگی در یک نام کوتاه و ۲۰ بار استفاده از آن؟

اگر پاسختان گزینه دوم است، یعنی استفاده از متغیر را انتخاب کرده‌اید.

متغیرها به شما امکان ذخیره ویژگی‌های پرتکرار، مانند رنگ‌ها یا اندازه فونت‌ها را می‌دهد. سپس می‌توانید از این نام‌ها در هرجایی که آن سبک را می‌خواهید، استفاده کنید.

اهمیت استفاده از متغیر ها در Css

از بارزترین دلایل استفاده از متغیرهای CSS، می‌توان به موارد زیر اشاره کرد:

• صرفه‌جویی در زمان کدنویسی
• کاهش کدها و اندازه فایل
• کاهش زمان بارگذاری صفحات
• سادگی در اصلاح کدها توسط سایر توسعه‌دهندگان
• جلوگیری از تکرار یک مقدار
• امکان جدا کردن متغیر از سایر کدها و آزمایش بخش‌های وابسته به آن
• مشاهده تاثیر یک متغیر روی المان‌های تصویری وابسته به آن، بدون نیاز به تغییر تمام کدها

۸ کاربرد متغیر ها در Css

کاربردهای متغیرهای CSS درنهایت منجربه سادگی در توسعه و افزایش کیفیت نگهداری فایل‌های CSS خواهند شد. در ادامه لیستی از مزایای متغیرها در CSS را ارائه خواهیم داد.

1. امکان استفاده مجدد

با یک‌بار تعریف مقدار و ساخت یک متغیر برای نگهداری آن، می‌توانید در سراسر فایل CSS خود، به‌صورت مکرر از آن استفاده کنید.

2. کاهش تکرار

در برنامه‌نویسی مفهومی به‌نام “DRY” وجود دارد که متخصصان آن را چنین توصیف می‌کنند: 

«Do Not Repeat Yourself: کدهای خودتان را تکرار نکنید.»

این موضوع برای استفاده چندباره از مقادیر پرتکرار مانند رنگ‌ها، خانواده فونت‌ها یا فاصله‌هایی که در چندین عنصر استفاده می‌شوند، مهم‌تر از سایر بخش‌ها است.

3. قابلیت نگهداری مطلوب

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

4. خوانایی بالا

استفاده از نام‌های توصیفی مانند primary-color و base-font-size، نسبت‌به استفاده از  مقادیر خام همچون #ff0000 یا 16px، فایل‌تان را مستندتر و درک آن را آسان‌تر می‌کند.

5. ساخت تم و سفارشی‌ سازی

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

6. طراحی واکنش‌ گرا

توسعه‌دهندگان متغیرهای CSS را با کوئری‌های رسانه (Media Queries) ترکیب می‌کنند تا سایتی واکنش‌گرا بسازند. نتیجه این کار، تنظیم ظاهر صفحات براساس اندازه صفحه یا شرایط دیگر آن خواهد بود. 

7. قابلیت جابه‌جایی داده‌ ها با جاوا اسکریپت

متغیرها در CSS بخشی از DOM هستند؛ به این معنی که می‌توان با استفاده از جاوااسکریپت به آن‌ها دسترسی پیدا کرد. بنابراین امکان تغییر و ساخت یک استایل پویا براساس تعاملات کاربر یا عوامل دیگر امکان‌پذیر است.

8. برخورداری از ویژگی‌ های Cascading و وراثت

متغیرهای CSS از قوانین Cascading و وراثت مشابه‌ با دیگر خصوصیات معمولی CSS (CSS Properties) پیروی می‌کنند.

۵ مورد از ویژگی‌ های متغیرهای CSS

ویژگی های متغیرها در CSS طیف گسترده‌ای را شامل می‌شود که در ادامه هرکدام را تشریح کرده‌ایم.

1. تعیین Scope محلی یا سراسری

متغیرها می‌توانند در Scope محلی یا سراسری نوشته شوند. متغیرهای محلی در یک انتخاب‌گر (Selector) خاص تعریف می‌شوند و فقط توسط آن محدوده و فرزندانش قابل دسترسی هستند؛ درحالی‌که متغیرهای سراسری در شبه‌کلاس اصلی (:root pseudo-selector) تعریف شده‌ و در کل فایل CSS قابل دسترسی هستند.

2. Cascading

اگر یک متغیر چندین‌بار با مقادیر مختلف تعریف شود، CSS اعمال آن را روی یک عنصر، با قوانین Cascading تعیین می‌کند. 

3. وراثت

به‌طور پیش‌فرض، متغیرها در CSS مقادیر خود را از عنصر والدشان به ارث می‌برند. بااین‌حال، می‌توان متغیر و والد آن را با استفاده از کد property at-rule@ تفکیک کرد.

4. اختصاص انواع مقادیر

متغیرهای CSS می‌توانند مقادیر متفاوتی را در خود نگه دارند؛ مانند رنگ‌ها، فونت‌ها، اندازه‌ها، درصدها، تابع calc و حتی سایر متغیرهای CSS.

5. امکان به‌روزرسانی پویا

مقدار متغیر CSS را می‌توان در محیط DOM و با استفاده از جاوااسکریپت تغییر داد. 

تعریف و نحوه اعلان متغیر ها در CSS

برای تعریف متغیرها در CSS، باید ابتدا یک نام را برای آن درنظر بگیریم. سپس دو خط فاصله به‌عنوان پیش‌وند به ابتدای آن بیفزاییم. کد نهایی مشابه دستور زیر خواهد شد:

<selector> {
  --bg-color: #405580;
}

<selector> در اینجا به هر انتخاب‌گر معتبری در CSS اشاره دارد که برای تعیین عناصر HTML استفاده می‌کنید؛ مانند section و div. bg-color هم نام متغیر است.

نحوه اعلان متغیرها در CSS هم با استفاده از تابع  var() و به شکل زیر انجام می‌شود:

<selector> {
  background-color: var(--bg-color);
}

نحوه استفاده از متغیر ها در CSS

برای استفاده از متغیرهای CSS، کافیست طبق کدهای بسیار ساده که در بخش قبل نوشتیم، یک‌بار متغیر را تعریف و با استفاده از تابع var()، آن را فراخوانی کنید.

بهتر است از تفکر استراتژیک هنگام تعریف و استفاده از متغیرها استفاده کنید؛ یعنی هنگام ساخت آن، به Scope عمومی (root:) و خاص (Local) توجه داشته باشید. این Scopeها را در بخش بعدی توضیح خواهیم داد.

دامنه متغیر ها در CSS

دامنه متغیرهای CSS را با نام Scope یا محدوده می‌شناسیم. دو محدوده برای CSS Variables  داریم: 

1. دامنه عمومی Global Scope (:root)
2. دامنه محلی و خاص (Local Scope)

اگر می‌خواهید از متغیر در کل فایل CSS استفاده کنید، بهتر است آن را در root: جا دهید؛ اما اگر متغیر را فقط در یک کلاس یا ID خاص نیاز دارید، آن را در Local Scope بنویسید.

دستور نوشتن متغیر در root: به شکل زیر است:

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

برای نوشتن متغیر در دامنه محلی هم باید کد را در selector موردنظر یا کلاس به‌خصوص بنویسید. 

به‌طور مثال، می‌خواهیم متغیر container-color– را در کلاس container بنویسیم. پس کد آن به شکل زیر خواهد بود:

.container {
  --container-color: green;
  color: var(--container-color);
}

۵ نکته و ترفند های استفاده از متغیر ها در CSS

تمام توسعه‌دهندگان هنگام استفاده از متغیرهای CSS، باید به برخی نکات و ترفندها توجه داشته باشند که در ادامه، آن‌ها را توضیح داده‌ایم.

1. از نام‌‌های توصیفی – مانند main-bg-color به‌جای color1 – برای خوانایی و نگهداری ساده کدهای خود استفاده کنید؛
2. کار با پیش‌پردازنده‌ها (Preprocessors) مانند Sass و Less را یاد بگیرید. آن‌ها کدهای‌تان را سازمان‌دهی می‌کنند؛ یعنی اجازه می‌دهند تا متغیرها را در فایل‌های جداگانه تعریف کنید و هرکدام را در سراسر پروژه خود فرا بخوانید؛
3. هرجایی از کد را که بارها تکرار شد؛ در متغیرها جا دهید؛
4. متغیرهای CSS می‌توانند محاسبات را با استفاده از تابع calc() در درون خود نگه دارند؛ به‌طور مثال، می‌توانید فرمول محاسبه حاشیه‌های صفحه را در یک متغیر نگه دارید؛
5. برای تغییر استایل المان‌های صفحه، استفاده از متغیرها روشی هوش‌مندانه است؛ برای مثال، تغییر رنگ دکمه با استفاده از جاوااسکریپت و یک متغیر CSS.

۲ مثال‌ عملی از استفاده متغیر ها در CSS

در این بخش، کدهای HTML و CSS دو پروژه عملی را با شما به‌اشتراک می‌گذاریم. این مثال‌ها را می‌توانید در پروژه‌های دیگر خود به‌کار بگیرید.

۱- ساخت دکمه‌ های رنگی

در این پروژه، قصد داریم چند رنگ را برای چهار دکمه تعریف کنیم. ابتدا کدهای HTML را به شکل زیر می‌نویسیم:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS Variables - Button Variations</title>
  </head>
  <body>
    <section>
      <div class="container">
        <h1 class="title">CSS Color Variations</h1>
        <div class="btn-group">
          <button class="btn btn-primary">Primary</button>
          <button class="btn btn-secondary">Secondary</button>
          <button class="btn btn-link">Link</button>
          <button class="btn btn-success">Success</button>
          <button class="btn btn-error">Error</button>
        </div>
      </div>
    </section>
  </body>
</html>

توجه کنید که چگونه هر دکمه دارای دو کلاس است: کلاس btn و کلاس دوم. کلاس btn به‌عنوان کلاس پایه نقش‌آفرینی می‌کند. کلاس دوم هم در نقش کلاس اصلاح‌کننده ظاهر می‌شود که از پیش‌وند btn- تشکیل شده است.

حال کدهای پایین را تایپ می‌کنیم تا استایل صفحه را بسازیم.

<style>
  * {
    border: 0;
  }
  :root {
    --primary: #0076c6;
    --secondary: #333333;
    --error: #ce0606;
    --success: #009070;
    --white: #ffffff;
  }
  /* base style for all buttons */
  .btn {
    padding: 1rem 1.5rem;
    background: transparent;
    font-weight: 700;
    border-radius: 0.5rem;
    cursor: pointer;
  }
  /* variations */
  .btn-primary {
    background: var(--primary);
    color: var(--white);
  }
  .btn-secondary {
    background: var(--secondary);
    color: var(--white);
  }
  .btn-success {
    background: var(--success);
    color: var(--white);
  }
  .btn-error {
    background: var(--error);
    color: var(--white);
  }
  .btn-link {
    color: var(--primary);
  }
</style>

خروجی کدها باید چیزی مشابه تصویر زیر ارائه دهد:

۲- ساخت صفحه واکنش‌ گرا

در این پروژه، یک فرم ورود به سیستم را به‌صورت Responsive طراحی می‌کنیم. این فرم مقادیری را از متغیرهای CSS می‌گیرد؛ مانند Media Query و تغییر ویژگی‌های سفارشی. در این مثال، می‌توانیم مقادیر متفاوتی را برای متغیرها در نقاط شکست صفحات مختلف درنظر بگیریم.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Responsive design with CSS variables</title>
</head>
<body>
  <div class="form-box">
    <input type="text" value="Username" />
    <input type="password" value="Password" />
    <button>Login</button>
  </div>
</body>
</html>

این فرم فقط از دو عنصر ورودی و یک دکمه تشکیل شده است.

کدهای CSS این پروژه را به شکل زیر می‌نویسیم:

<style>
  /* --- desktops and common --- */
  :root {
    --form-box-padding: 8px;
    --form-box-flex-gap: 8px;
    --form-input-font-size: 12px;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .form-box {
    display: flex;
    justify-content: flex-end;
    gap: var(--form-box-flex-gap);
    padding: var(--form-box-padding);
    background-color: #333;
    text-align: center;
  }
  .form-box input,
  .form-box button {
    font-size: var(--form-input-font-size);
    padding: 8px;
    margin-right: 4px;
  }
  .form-box input {
    outline: none;
    border: none;
  }
  .form-box button {
    border: none;
    background-color: #edae39;
  }
</style>

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

برای رسیدن به هدف‌مان – که ساخت یک فرم واکنش‌گرا بود – باید نقاط شکست را در Media Query بنویسیم. 

برای padding یا ویژگی‌های مبتنی‌بر مقادیر مانند اندازه فونت، می‌توانیم از متغیرهای CSS به‌جای نوشتن مکرر خصوصیات استفاده کنیم. 

به قطعه CSS قبلی نگاه کنید: سه متغیر در این CSS داریم. این متغیرها را با بلوک‌های Media Query تغییر می‌دهیم و کدهای زیر را به آن می‌افزاییم.

/* --- tablets --- */
@media screen and (min-width: 601px) and (max-width: 900px) {
  :root {
    --form-box-padding: 20px 12px 20px 12px;
    --form-box-flex-gap: 12px;
    --form-input-font-size: 14px;
  }
  .form-box input,
  .form-box button {
    display: block;
    width: 100%;
  }
}
/* --- mobiles --- */
@media screen and (max-width: 600px) {
  :root {
    --form-box-padding: 24px;
    --form-box-flex-gap: 12px;
    --form-input-font-size: 20px;
  }
  .form-box {
    flex-direction: column;
  }
  .form-box input,
  .form-box button {
    display: block;
  }
}

خروجی کدهای بالا به شکل زیر در خواهد آمد:

سازگاری مرورگر ها با متغیر های CSS 

لیستی از مرورگرهایی که با CSS Variables سازگار هستند را به‌همراه نسخه آن‌ها در ادامه مشاهده خواهید کرد.

۶ نکته برای استفاده از متغیر های CSS در پروژه‌ های مختلف

نکاتی که در ادامه لیست می‌کنیم، می‌توانند در تمام پروژه‌ها درنظر گرفته و پیاده شوند.

1. تغییر رنگ کل وب‌ سایت 

رایج‌ترین استفاده از متغیرها در تعیین رنگ‌ها است. پس برای تغییر رنگ کل وب‌سایت‌تان، از آن‌ها استفاده کنید.

2. طراحی تم‌ های خاص 

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

3. نام‌ گذاری توصیفی و خاص

اگر متغیرهای زیادی در یک فایل دارید، سعی کنید نام‌های واضح و توصیفی را برای هرکدام بنویسید.

4. کامنت‌ نویسی اصولی

تمام تعاریف متغیرها و عملکرد آن‌ها را به‌شکل خلاصه در ابتدای فایل CSS بنویسید.

5. استفاده با رویکرد استراتژیک 

در هربار تعریف متغیر، محدوده یا Scope آن را با استراتژی درست برگزینید.

6. تسلط بر Media Query

برای تنظیم صفحه وب با نمایش‌گرهای مختلف، از متغیرها در Media Query استفاده کنید.

آنچه در متغیر ها در CSS خواندیم

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