🎁 تخفیف ویژه تمامی دوره های آموزشی 🎁

آموزش متغیرهای CSS و تابع ()var

در این بخش، متغیرهای CSS و عملکرد تابع ()var توضیح داده می شود.

آموزش متغیرهای CSS و تابع ()var

متغیرهای  CSS

تابع ()var برای درج مقدار یک متغیر CSS استفاده می شود.

متغیرهای CSS به DOM دسترسی دارند، به این معنی که می‌توانید متغیرهایی با دامنه محلی یا سراسری ایجاد کنید، متغیرها را با جاوا اسکریپت تغییر دهید و متغیرها را بر اساس کوئری‌های media تغییر دهید.

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

مثال زیر روش سنتی تعریف برخی از رنگ‌ها را در یک style sheet  نشان می‌دهد (با تعریف رنگ‌های مورد استفاده برای هر آیتم خاص):

کد CSS :

آموزش متغیرهای CSS

کد HTML :

آموزش طراحی سایت

خروجی مثال بالا عبارت است از :

متغیرهای CSS

سینتکس تابع ()var

تابع ()var برای درج مقدار متغیر CSS استفاده می شود.

سینتکس تابع ()varبه صورت زیر است:

var(--name, value)

Name : ضروری است و نشاندهنده نام متغیر است (باید با دو خط تیره شروع شود).

Value : اختیاری است و نشاندهنده مقدار بازگشتی است (اگر متغیر پیدا نشد استفاده می شود).

نکته: نام متغیر باید با دو خط تیره (--) شروع شود و به حروف کوچک و بزرگ حساس است!

()var چگونه کار می کند؟

اول از همه: متغیرهای CSS می توانند دامنه سراسری یا محلی داشته باشند.

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

برای ایجاد یک متغیر با دامنه سراسری، آن را در انتخابگر root اعلام کنید. انتخابگر root با عنصر ریشه سند مطابقت دارد.

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

مثال زیر برابر با مثال بالا است، اما در اینجا از تابع  ()var استفاده می کنیم.

ابتدا دو متغیر سراسری (blue-- و white--) را اعلام می کنیم. سپس، از تابع ()var برای درج مقدار متغیرها در style sheet استفاده می کنیم:

کد CSS :

var() چگونه کار می کند؟

کد HTML :

تابع var()

خروجی قطعه کد بالا عبارت است از : 

آموزش متغیرها در CSS

مزایای استفاده از ()var عبارتند از:

1- خواندن کد را آسان تر می کند (قابل درک تر)

2- تغییر مقادیر رنگ را بسیار آسان تر می کند.

برای تغییر رنگ آبی و سفید به آبی و سفید ملایم تر، فقط باید دو مقدار متغیر را تغییر دهید:

کد CSS:

آموزش طراحی سایت

کد HTML :

متغیرهای CSS

خروجی مثال بالا عبارت است از:

متغیرهای CSS

پشتیبانی مرورگرها

اعداد در جدول زیر اولین نسخه مرورگر را مشخص می کند که به طور کامل از تابع ()var  پشتیبانی می کند.

پشتیبانی مرورگرها از تابع var()

تابع ()var در CSS

()var مقدار یک متغیر CSS را درج می کند.

استفاده از متغیرها در Media Queries

اکنون می خواهیم یک مقدار متغیر را در داخل یک Media Queries تغییر دهیم.

نکته: Media Queries در مورد تعریف قوانین سبک متفاوت برای دستگاه‌های مختلف (صفحه‌نمایش، تبلت، تلفن همراه و غیره) هستند.

در اینجا، ابتدا یک متغیر محلی جدید به نام fontsize-- برای کلاس container. تعریف می کنیم. مقدار آن را 25 پیکسل قرار می دهیم. سپس از آن در کلاس container. پایین تر استفاده می کنیم. سپس، یک قانون media@ ایجاد می‌کنیم که می‌گوید: "وقتی عرض مرورگر 450 پیکسل یا بیشتر است، مقدار متغیر fontsize-- کلاس container. را به 50 پیکسل تغییر دهید."

آنچه که در زیر می بینید یک مثال کامل است:

کد CSS :

استفاده از متغیرها در Media Queries

کد HTML :

استفاده از متغیرها در Media Queries

خروجی مثال بالا عبارت است از :

استفاده از متغیرها در Media Queries

در اینجا مثال دیگری وجود دارد که در آن مقدار متغیر blue-- را در @media نیز تغییر می دهیم:

کد CSS :

آموزش CSS

کد HTML :

طراحی وبسایت

خروحی مثال بالا عبارت است از :

آموزش متغیرهای CSS

 

 

متغیرهای CSS تابع ()var آموزش CSS