خواندن ۱ دقیقه·۴ سال پیش

متغیر ها در سی اس اس (CSS)

متغیر ها رو توی سی اس اس باید توی یک سلکتور تعریف کرد که همون سلکتور حوزه اون متغیر میشه!
برای تعریف متغیر به صورت سراسری -یعنی جوری که همه بتونن بهش دسترسی داشته باشن- میتونیم از سلکتور های root: یا body استفاده کنیم.

اسم متغیر ها هم باید با دوتا - شروع بشه.

برای دسترسی به مقدار متغیر هم از تابع var استفاده میکنیم.

مرورگر هایی ک از تابع var پشتیبانی میکنن اون اعداد هم اولین ورژن مرورگر هستن که از var پشتیبانی میکردند

تامام!?

مثال

کد های درون فایل اچ تی ام ال

<!DOCTYPE html>
<html>
<head>
<title>Numb</title>
<link rel=&quotstylesheet&quot href=&quotmain.css&quot>
</head>
<body>
<div class=&quotblack&quot>????</div>
<div class=&quotyellow&quot>????</div>
</body>
</html>

کد های درون فایل سی اس اس

:root{
--font-family: Arial, Helvetica, sans-serif;
--font-size: 1rem;
--pading: 20px;
--main-color: yellow;
--sec-color: black;
--body-bg-color: gray;
}
body{
font-family: var(--font-family);
background-color: var(--body-bg-color);
padding: 5% 0px;
}
div{
width: 50%;
padding: var(--pading);
margin: 10px auto;
text-align: center;
}
.yellow{
background-color: var(--main-color);
}
.black{
background-color: var(--sec-color);
}

تو مثال دوتا div تعریف کردیم به هرکدوم هم کلاس دادم، یکی yellow و یکی هم black

توی فایل سی اس اس مشاهده می کنید که داخل سلکتور روت 6 تا متغیر تعریف کردم و توی سلکتور های مختلف هم ازشون استفاده کردم.

خروجی

کامنت بنویسین و لایک کنین ??

cssvariablesطراحی وب

Numb

Should i kill ma self or have cup of cafe?

شاید از این پست‌ها خوشتان بیاید