X

جستجو


روشهای تعریف متغیر در CSS

روشهای تعریف متغیر در CSS
  • اشتراک گذاری

روشهای تعریف متغیر در CSS

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

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

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

تعریف متغیر با استفاده از مقدار Class در CSS

من خودم از این روش زیاد استفاده کردم هم برای رنگ ها ، چیدمان ها ، فونت ها و …. . همانطور که خودتون متخصص این کار هستید ، میدانید که محدودیتی در استفاده از کلاس های هم نام در HTML وجود ندارد .

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

مثال 1 : کلاسی جهت قرار دادن المانها در کنار یک دیگر :

.inlineBlock{ 
      display:inline-block;
      vertical-align:top;
}

مثال 2 :چیدمان های مختلف متن

.center{
     text-align:center;
}
.left{
    text-align:left;
}
.right{
   text-align:right
}

تعریف متغیر با استفاده از تابع var

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

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

روش تعریف متغیرها :

:root{
--color:#FFF;
--font:"byekan";
}

نحوه استفاده از متغیر ها :

p{
background-color:var(--color);
font-family : var(--font);
}