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

ما در این مقاله به شما نشان خواهیم داد که این متغیرهای شگفت*انگیز در Css چگونه در مباحث Sass و Less بکارگرفته می*شوند. تنها مساله*ای که باید از همین ابتدا به آن توجه داشته باشید آن است که این متغیرها پیش از استفاده نیاز به کامپایل شدن دارند.

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

خیالتان کاملا راحت باشد! قواعد و قوانینی که برای متغیرهای Css با آن*ها روبرو هستید درست همانند قواعد و مقرراتی است که در دیگر تعاریف Css حاکم می*باشد.

یک راه حل برای استفاده راحت*تر از متغیرها آن است که آن*ها را به گونه*ای تعریف کنید که به اصطلاح "عمومی" باشند. برای این کار می*توانید از شبه کلاس :root، استفاده کنید. با این کار تمام selectorهای شما نیز ویژگی*های تعریف شده را به ارث خواهند برد.

کد:
:root{
 --awesome-blue: #2196F3;
}
برای دسترسی به مقدار متغیرهای تعریف شده، شما می*توانید از تابع var(…) استفاده کنید. لازم است بدانید که نام متغیرهای شما به حروف کوچک و بزرگ حساس هستند. یعنی --foo != --FOO پس به نام*گذاری آن*ها و نحوه فراخوانیشان دقت داشته باشید.

کد:
.some-element{
 background-color: var(--awesome-blue);
}
پشتیبانی:

در حال حاضر مرورگر کروم از ورژن 49.0، اینترنت اکسپلورر از ورژن 15.0، فایرفاکس از ورژن 31.0، سافاری از ورژن 9.1 و مرورگر اپرا از ورژن 36.0 به بعد از ویژگی جدید متغیرهای Css پشتیبانی خواهند کرد.

برای چک کردن قابلیت*های وب که در مرورگر کروم قابل پشتیبانی می*باشند می*توانید به آدرس chrome://flags/ رفته و عبارت Enable experimental Web Platform features را جستجو کنید.

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

مثال ۱: رنگ*ها

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

مزیت این کار چیست؟

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

کد:
: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);
}
مثال۲: نام گذاری دلخواه برای مشخصات Css

کاربرد دیگر متغیرها برای آن زمانی است که شما می*خواهید مقادیری پیچیده از ویژگی*های Css را به یاد بیاورید و بکار ببرید. در چنین مواقعی این احتمال وجود دارد که آن ویژگی درست در یاد شما نماند. بهترین مثال برای شما در این مورد، قواعدی هستند که چند مقداره می*باشند. مانند box-shadow، transform و font.

با قرار دادن این ویژگی*ها در متغیر ، شما می*توانید با نامی خوانا و آنچه برای شما قابل فهم است به آن*ها دسترسی پیدا کنید.

کد:
: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);
}
مثال ۳: تغییر متغیرها به صورت پویا

زمانی که یک ویژگی سفارشی در Css، چند بار اعلام می*شود، قوانین آبشاری استانداردی که وجود دارند تداخل*های پیش*آمده را برطرف خواهند نمود و موجب می*شوند متغیرها با تعاریف بسیار کوتاهتری در کدهای 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);
}
چند نکته کاربردی دیگر:

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

تابع var() دارای پارامتر دومی است که آن پارامتر یک مقدار بازگشتی است و در صورتی که متغیر سفارشی شما شکست بخورد، از آن استفاده خواهد شد.

کد:
width: var(--custom-width, 20%);
برای شما امکان پذیر است که این متغیرها و مقادیر شخصی خود را به صورت تو در تو در میان کدهایتان بکار ببرید.

--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 در طراحی سایت خود استفاده کنید اما نسبت به این تکنولوژی کمی محتاط باشید و بیاد داشته باشید که مرورگرها از ورژنی مشخص به بعد آن*ها را پشتیبانی می*کنند.

[برای نمایش لینک باید عضو شوید. ] [برای نمایش لینک باید عضو شوید. ]