چیزهایی که نیاز دارید در مورد متغیرات css بدانید

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

به شما نشان داده ایم که متغیرات اصلی sass و less چگونه هستند ولی این متغیرات پیش پردازنده اند و برای استفاده نیاز به ترجمه دارند . این متغیرات در وانیلا css موجود است ، و شما میتوانید در مرورگرهایتان از آن استفاده کنید .

استفاده و تعریف متغیرات css

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

:root{
    --awesome-blue: #2196F3;
}

برای دسترسی به یک مقدار در یک متغیر ما میتوانیم از var(…)  استفاده کنیم . توجه کنید که نامها از موارد حساس هستند بنابراین دقت داشته باشید مثلا :   --foo != --FOO.

.some-element{
    background-color: var(--awesome-blue);
}

پشیبانی

هم اکنون فقط فایرفاکس از css پشتیبانی میکند . هر چند نسخه 49 و بالاتر گوگل کروم هم شامل چنین ویژگی هایی هستند . اگر شما هم اکنون از نسخه قدیمی تر از 48 گوگل کروم استفاده میکنید میتوانید با رفتن به chrome://flags/  از این قابلیت و تکنولوژی های جدید دیگر بهره ببرید . برای جزئیات بیشتر مراجعه کنید به

http://caniuse.com/#feat=css-variables

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

مثال 1 : رنگ های تم 

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

برای اطمینان از اینکه این نمونه نمایشی درست کار میکند از این مرورگرها اینجا استفاده کنید .

کد css

:root{
    --primary-color: #B1D7DC;
    --accent-color: #FF3F90;
}

html{
    background-color: var(--primary-color);
}

h3{
    border-bottom: 2px solid var(--primary-color);
}

button{
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

کد HTML

<div class="container">
    <h3>Dialog Window</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate vitae nibh sed sodales. Maecenas non vulputate lacus, sed convallis eros. Cras sollicitudin, felis sit amet pharetra mattis, metus lectus ullamcorper magna.</p>
    <button>Confirm</button>
</div>

کد CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    padding: 30px;
    font: normal 13px/1.5 sans-serif;
    color: #546567;
    background-color: var(--primary-color);
}

.container{
    background: #fff;
    padding: 20px;
}

h3{
    padding-bottom: 10px;
    margin-bottom: 15px;
}

p{
    background-color: #fff;
    margin: 15px 0;
}

button{
    font-size: 13px;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: none;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    outline: 0;
}

button:hover{
    opacity: 1;
}

مثال 2 : نام های قابل درک برای properties

یک استفاده عالی دیگر از متغیرها زمانی است که ما میخواهیم یک مقدار پیچیده تری برای property ذخیره کنیم بنابراین ما  مجبور نیستیم  آن را به یاد بسپاریم.
مثال خوب در این باره مربوط میشن به نقش های css  با چندین پارامتر (اندازه) ، مانند box-shadow, transform and font. با قرار دادن property در یک متغیر میتوانیم به نام های قابل درک برای افراد ، توسط معنا شناسی دسترسی داشته باشیم.

کد css

:root{
    --tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    --animate-right: translateX(20px);
}
li{
    box-shadow: var(--tiny-shadow);
}
li:hover{
    transform: var(--animate-right);
}

کد Html

<ul>
    <li>Hover on me!</li>
    <li>Hover on me!</li>
    <li>Hover on me!</li>
</ul>

ادامه کد css

html{
    background-color: #F9F9F9;
}
ul{
    padding: 20px;
    list-style: none;
    width: 300px;
}
li{
    font: normal 18px sans-serif;
    padding: 20px;
    transition: 0.4s;
    margin: 10px;
    color: #444;
    background-color: #fff;
    cursor: pointer;
}

مثال 3 - تغییر متغیرها به صورت پویا

زمانی که یک ویژگی چندین بار ظاهر میشود ، قوانین استاندارد آبشاری (پشت سر هم چیدن) تضادها را حل میکند . مثال پایین نشان میدهد تغییر property به صورت پویا چقدر ساده است ، در حالی که میبینیم هنوز هم کدها واضح و مختصر هستند.

کد CSS

.blue-container{
	--title-text: 18px;
	--main-text: 14px;
}
.blue-container:hover{
	--title-text: 24px;
	--main-text: 16px;
}
.green-container:hover{
	--title-text: 30px;
	--main-text: 18px;
}
.title{
	font-size: var(--title-text);
}
.content{
	font-size: var(--main-text);
}

کد HTML

<div class="blue-container">
	<div class="green-container">
		<div class="container">
			<p class="title">A Title</p>
			<p class="content">Hover on the different color areas to change the size of this text and the title.</p>
		</div>
	</div>
</div>

ادامه کد CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    background: #eee;
    padding: 30px;
    font: 500 14px sans-serif;
    color: #333;
    line-height: 1.5;
}

.blue-container{
	background: #64B5F6;
	padding-left: 50px;
}

.green-container{
	background: #AED581;
	padding-left: 50px;
}

.container{
    background: #fff;
    padding: 20px;
}

p{
	transition: 0.4s;
}

.title{
	font-weight: bold;
}

چند نکته دیگر 

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

• تابع var()  مقدار دومی دارد که اگر دستور شکسته شود میتواند یک مقدار را دو بار عرضه کند

width: var(--custom-width, 20%);

• میتواند property سفارشی را داخل هم قرار دهد .

--base-color: #f93ce9;
--background-gradient: linear-gradient(to top, var(--base-color), #444);

• متغیرها میتوانند با موارد جدیدی که به css اضافه شده اند توسط تابع calc()  ترکیب شوند .

--container-width: 1000px;
max-width: calc(var(--container-width) / 2);

متاسفانه این دستور هم اکنون فقط در فایر فاکس اجرا میشود .
این نتیجه گیری مقاله ماست ! از ویژگی های جدید css لذت ببرید ولی به یاد داشته باشید این هنوز یک علم تجربی است و از استفاده آن برای پروژه ها و مقاله های جدی خودداری کنید .