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