متغییر های CSS چیست؟

متغیر های سی اس اس (CSS variables) به زبان ساده مقادیری در سی اس اس هستن که در آن ها اطلاعاتی مثل رنگ مثل و … رو قرار میدن و دلیل استفادشون این هست که راحتر بتونیم مقادیر مشابه به همدیگر را تغییر دهیم.

متغییر های CSS: دلیل استفاده

1. برای مثال یه سایت دارین که تم سایت دارک هست و حالا بعد مدتی میخواین تم سایت رو تغیر بدین اینجا دو حالت وجود داره شما از متغیر های سی اس اس استفاده کردین و فقط کد های رنگی کپی پیست میکنید یا از متغیر ها استفاده نکردین و حالا باید تک تک دیو هارو تغیر بدین .
2. از دلایل دیگه میشه به این اشاره کرد که ایا درک (white-color– ) برای شما راحت تر هست یا BABABA#

چگونه یک متغییر CSS ای را تعریف کنیم

    توجه داشته باشید که حتما قبل از تعریف یک متغیر از “–” استفاده کنید و فواصل در نام را با استفاده از “-” پیاده سازی کنید.

  همونطور که در بخش پایین می بینید ما چند متغییر تعریف کردیم که مقدایر مختلفی از CSS به اون ها اختصاص دادیم.

:root {
  --Paragraph-font-size: 10px;
  --sec-white: 80%;
  --main-color: #1f58d4
}

<div class="padar">
    <span class="text"></span>  
    <span class="text"></span>  
    <span class="text"></span>  
</div>
<div></div>

.padar{
    --title-font-size :40px; 
}

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

.text{
    font-size:var(--title-font-size)
}

ما برای استفاده از متغیر ها همانطور که در مثال بالا میبینین از “var” استفاده میکنیم.

نتیجه گیری

در این پست به این چیستی و اهمیتی متغییر ها در CSS پرداختیم. یکی از دلایل مهم و پر اهمیت استفاده، پیروی از قانون DRY است.

این قانون نه تنها در CSS، بلکه در HTML و JS و تمامی زبان های برنامه نویسی وجود دارد. علاوه بر اهمیت متغییر ها، راجب به نوع عملکر و چیستی این موضوع پرداخته شد.
در نهایت باید به این موضوع بسیار مهم توجه کرد که در پروژه هایی با code base بزرگتر به مشکل نخوریم.

منابع:
برای اطلاع از موضوعات مختلف مرتبط با برنامه نویسی و طراحی به بخش  مقالات مگادمی (مگامگ) مراجعه کنید.