16
تشکر

متغیرها در CSS

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

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

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

تعریف متغیر

برای تعریف متغیرها باید ابتدای اسم آنها -var داشته باشد. برای مثال در کد زیر ما یک متغیر تعریف کردیم که مقدار margin را درون خود نگه میدارد.

html{
  var-head-margin: 20px 5px 0 5px;
}

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

html{
  var-head-margin: 20px 5px 0 5px;
}
h1{
  margin: var(head-margin);
}

هر متغیری که تعریف میکنید دارای یک حوزه دید یا محدوده است. این حوزه دید فقط شامل فرزندان عنصر انتخاب شده میشود. برای مثال ما در کد بالا متغیر var-head-margin را در عنصر html تعریف کردیم. بنابراین در تمام فرزندان این عنصر، این متغیر شناخته میشود و قابل استفاده است.

شما حتی میتوانید متغیرهای تعریف شده در یک فایل را در فایل دیگری استفاده کنید.

پشتیبانی

فعلا هیچ مرورگری از این امکان پشتیبانی نمیکند. اما شما میتوانید در مرورگر کروم با رفتن به صفحه chrome://flags و فعال کردن گزینه Enable experimental Webkit features از این امکان برای تست استفاده کنید.

مشاهده دمو

  • دانیال می‌گه:

    من دیده بودم که در less یا sass متغییر داشته باشه.اما در CSS3 نشنیده بودم.ممنون

  • علی می‌گه:

    بازم مثل همیشه عالی!


  • نظرات این مطلب بسته است.