css-custom-property

مانند سایر زبان های برنامه نویسی که از متغیر ها برای نگهداری مقداری استفاده می شود که بتوان بعدا در هر زمان به آن مراجعه کرد، در سی اس اس هم برای نگهداری و یا ذخیره سازی
مواردی مانند رنگ ها، نام فونت، اندازه فونت و … استفاده می شود و می توان در جاهای مختلف فایل سی اس اس آن را صدا کرد و از مقدار آن استفاده کرد. اسم رسمی و صحیح این متغیرها custom properties می باشد که معمولا در بین توسعه دهندگان و برنامه نویسان به نام متغیر جا افتاده است.

custom propertiyها امکان تعریف و تغییر متغیرها را می دهند که این متغیرها در سرتاسر فایل stylesheet قابل دسترسی هستند. قدیم تر برای انجام چنین کاری حتما باید از CSS preprocessors کمک می گرفتیم. مانند Sass

مفهوم root: و ()var

اصول اولیه custom properties اولین قدمی است که قبل از هر چیزی باید آن را بدانیم. از اینرو قبل از هر چیزی مفاهیمی را برای روشن تر شدن بهتر موضوع توضیح می دهیم. custom propertiy یک اسم، متغیر یا همان ویژگی است که با دو علامت hyphen یا همان خط فاصله شروع می شود. دقت کنید که با underline اشتباه نکنید. مثال: bg-color– .خوب حالا برای فراخوانی متغیری که تعریف کرده ایم باید از ()var استفاده کنیم.
به مثال زیر دقت کنید:

  
      :root {
        --bg-color: #000;
        --text-color: #fff;
      }
  

()var: فراخوانی متغیر

برای فراخوانی متغیری که قبلا تعریف شده است از ()var استفاده می کنیم. به این صورت که نام متغیری که میخواهیم فراخوانی در داخل پرانتر قرار می دهیم.

  
      div {
        color: var(--text-color);
        background-color: var(--bg-color);
      }
  

تعریف custom propertiyها یا به عبارت عمومی تر آن، متغیرها داخل root: به این معنی می باشد که متغیر تعریف شده در کل سند قابل ارجاع می باشد و متغیر در بالاترین سطح سند تعریف شده. root: تقریبا شبیه html می باشد. که اگر ویژگی را به html اختصاص دهیم در کل سند تاثیر می گذارد. root: هم به این صورت است که در تمام سند قابل دسترسی است.

مقادیر fallback

مقادیر fallback، مقادیری هستند که اگر یک custom property تعریف نشده باشد، مقدار fallback به جای آن استفاده می شود.

  
      div {
        color: var(--text-color, #000); // مقدار ۰۰۰# در صورت در دسترس نبودن متغیر اعمال می شود
        background-color: var(--bg-color, #fff); // در صورت در دسترس نبودن متغیر مقدار فال بک استفاده می شود
      }
  

 

تعریف یک custom property برای المنتی غیر از root: و html باعث می شود که آن متغیر فقط برای همان المنت و فرزندان آن المنت قابل استفاده باشد.

 

تفاوت متغیرهای سی اس اس (CSS Custom Properties) با متغیرهایی که توسط Preprocessorها مانند Sass ایجاد می شوند:

  • custom propertyها در خود مرورگر تفسیر می شوند و مانند sass نیازی به کامپایل شدن به فایل استاندارد css ندارند.
  • custom propertyها می توانند توسط جاوا اسکریپت فراخوانده شوند و تغییراتی را توسط جاوا اسکرپیت در آن ها اعمال کرد در صورتی که متغیرها در برنامه هایی مانند sass کامپایل می شوند و فقط مقادیر آن ها قابل دسترسی هستند.

فراخوانی از طریق JavaScript

برای دسترسی و فراخوانی به یک custom property از طریق جاوا اسکریپت به شکل زیر عمل می کنیم:

  
      document.documentElement.style.setProperty('--bg-color', #ccc); // مقدار دو همان فال بک است که اختیاری می باشد
  

 
 
 

نویسنده: سعید پناهی

طراح و توسعه دهنده وب، رابط کاربری. فرانت اند. علاقه مند به یادگیری و آموزش

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

آموزش css3

آموزش دستورات خاص و کاربردی در CSS3

در این مقاله تعدادی از دستورات جالب و کاربردی در CSS3 را بررسی می کنیم. دستوراتی که کمتر در مورد آن ها صحبت می شود اما دانستن آنها مهم و در طراحی کمک بزرگی به ما می کند. خوب پس در ادامه با من همراه باشید.

کارگاه آموزشی طراحی وب

کارگاه آموزشی طراحی و توسعه وب سایت به صورت پروژه محور و کارگاهی

تفاوت let و var

در گذشته تنها روشی که برای تعریف متغیر در جاوا اسکریپت استفاده می شد استفاده از کلمه کلیدی var بود. این کلمه برای مدت های طولانی برای تعریف متغیر ها در جاوا اسکریپت به کار می رفت اما مشکلاتی هم به همراه داشت که باعث شد درنسخه های بعدی جاوا اسکریپت با اضافه کردن دو کلمه کلیدی دیگر const و let برای تعریف کردن متغیر، این مشکلات بر طرف شود. بعد از انتشار نسخه ۶ جاوا اسکریپ دو کلمه کلیدی دیگر let و const برای تعریف متغیر به این زبان اضافه شد. که در مجموع سه کلمه کلیدی برای تعریف متغیر در این زبان مورد استفاده قرار می گیرد. به طور کلی کلمه کلیدی const برای تعریف یک ثابت به کار می رود. منظور از ثابت متغیری است که مقدار آن ثابت است مثلا اگر یک ثابت رو معادل یک رشته قرار دادیم نمی توان آن را تغیر داد.