0️⃣  تا 💯 CSS Variables ها در ۳ دقیقه

خیلی خب سریع میخوایم با css variables ها آشنا بشیم بهش Custom properties میگن یه معرفی کوتاه داریم بعد میگیم چجوری استفاده میشن و چرا باید استفاده کنیمو ...

معرفی

یکی از محدودیت های css برا هر سایتی که میخوایم بزنیم اینه که چجوری سریع و آسون مقدار یه فونت سایز یا رنگ رو عوض کنیم واس همین سروکله preprocessors هایی مثل SASS و LESS پیدا شد. که مثل یه زبون برنامه نویسی بهشون متغیر میدادیم و یه فایل css میگرفتیم. تا این که سروکله این دوست عزیزمون با سینتکس یه مقدار عجیبش پیدا شد و الان که این پستو میخونین همه مرورگرای مدرن ازین قابلیت پشتیبانی میکنن. اگه دوس دارین دقیق تر بدونین وضعیت ساپورتش چجوریه برین اینجا .

چجوری استفاده کنیم؟

اگه برنامه نویسی کرده باشین یا با SASS و LESS کار کرده باشین خیلی براتون آشناست اگه نه خب آشنا میشیم باهاش. variable یا متغیر های در css با پیشوند -- مشخص میشن و اگر خواستیم به اون مقدار ارجاع بدیم var میزنیم. متغیر ها میتونن توی هر بلاک از کد تعریف بشن یا مقدار دهی بشن اگر هم خواستیم تو کل پروژه از یه مقدار استفاده کنیم اونارو توی بلاک :root تعریف میکنیم.بریم سراغ یه مثال تا بهتر متوجه شیم.

:root {
  --black: #24252a ;
  --gallery: #eeeeee;
  }
 body {
   background-color: var(--black);
  }
  p {
  color: var(--gallery);
  }

خب توی :root ئی که بهتون گفتم یه متغیر رنگ سیاه و یه متغیر رنگ گالری تعریف کردم و رنگ بکگراند body رو سیاه کردم و رنگ متن p هم یه سفید باحاله.





راستی متغیر میتونه اندازه هم باشه. لزومی نداره که حتما رنگ باشه.
اصلا اونو مثل یه رشته ببینین. هر جا که یه رشته دیدین اون جا میتونه یه متغیر باشه rgba رو یادتونه که ۴ تا عدد میگرفت که به ترتیب رنگ قرمز آبی سبز و آلفا(میزان شفافیت)
مثلا میتونین بیایم بگیم

--black : 0,0,0;

بعد بیایم ازین مقدار رنگی rgba ازش استفاده کنیم.

background-color : rgba(var(--black),0.5);

یا Fallback Font هارو یادتون هست میتونین به جای

 html {
    font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif; 
 }

بگیم

  html {
      --fallback-font : "Lucida Grande",
       font-family: Lato, var(--fallback-font) , Tahoma, Sans-Serif;
 } 

آخرین مورد هم محدوده عملکرد متغیر هاست . متغیر ها در :root پابلیک یا عمومی اند همچنین متغیر توی بلاک body یا p یا هر بلاک دیگه هم میتونن تعریف بشن ولی فقط توی همون بلاک قابل دسترسی اند. مثلا توی این مثال ما نمیتونیم یه رنگ مثلا قرمز رو توی body تعریف کنیم و توی p ازش استفاده کنیم. یا مثلا اگر مثل مثال زیر رنگ سیاه رو override کنین فقط توی خود body اعمال میشه.
مثلا اینجا رنگ بک گراند body اینه #000000 رنگ متن p همونی که تو ریشه تعریف کردیم.

 body {
     --black : #000000;
     background-color: var(--black);
 }
 p {
     background-color : var(--gallery)
      color: var(--black);
    }

نکات اضافی و نهایی

۱- متغیر ها میتونن مقدار fallback داشته باشن یعنی مثلا اگر اون متغیر جایی تعریف نشده بود اون مقدار لحاظ میشه مثلا :

font-size : var(--large,60px);

۲- میتونیم مقادیر رو با calc محاسبه کنیم.

:root{ 
    --default-padding: 5px
}

.card {
    padding: calc(var(--default-padding) * 2);
}

۳- مقادیر متغیر میتونن از طریق جاوااسکریپت در دسترس باشن:

window.getComputedStyle(document.documentElement).getPropertyValue('--default-padding');
window.getComputedStyle(document.querySelector('p')).getPropertyValue('--default-padding')

یا اونو تغییر بدن:

document.querySelector('p').style.setProperty('--default-padding','30px');
//modifying :root 
document.documentElement.style.setProperty('--default-padding','30px');

۴- یک متغیر میتونه از روی یه مقدار دیگه حساب بشه:

 --max-font-size : 50;
 --min-font-size : 12;
  --font-size-difference: calc(var(--max-font-size) - var(--min-font-size));

۵- یه متغیرمیتونه بدون واحد باشه و بعدا واحد بهش اضافه شه.

font-size : calc(var(--font-size-difference) * 1px);


۶- کمک بزرگی تو responsive باشه و کلی کد رو کوتاه کنه

:root {
     --default-padding: 1rem;
    }
@media (min-width: 600px) {
      :root {
          --default-padding: 1.25rem;
       }
       
     }
@media (min-width: 1000px) {
    :root {
           --default-padding: 1.5rem; 
     }
 }
 div{
    padding: var(--default-padding);
 }

در مثال بالا padding عرض در زیر ۶۰۰ پیکسل برابر 1rem بین ۶۰۰ و ۱۰۰۰ پیکسل 1.25rem و بالا ۱۰۰۰ پیکسل برابر با 1.5rem هست.