امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
متغیرهای css و چگونگی استفاده از آن ها
نویسنده پیام
nooshin88 آفلاین
عضو انجمن
عضو


ارسال‌ها:
90
تاریخ عضویت:
Jan 2016
اعتبار:
0
تشکر ها: 0
1 تشکر شده در 1 ارسال
ارسال: #1
متغیرهای css و چگونگی استفاده از آن ها
زمانی که پروژه‌های وب شما به مرور پیچیده‌تر و بزرگ‌تر می‌شوند، 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 در طراحی سایت خود استفاده کنید اما نسبت به این تکنولوژی کمی محتاط باشید و بیاد داشته باشید که مرورگرها از ورژنی مشخص به بعد آن‌ها را پشتیبانی می‌کنند.

منبع: طراحی سایت تهران ستروکیت
جستجو پاسخ با نقل قول


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  طراحی سایت با استفاده از گوگل آنتالیکس limotorsh 0 48 04-24-2019، 00:06
آخرین ارسال: limotorsh
  استفاده آسان از گوگل مپ nooshin88 0 179 01-12-2019، 11:33
آخرین ارسال: nooshin88
  چگونگی مدیریت منوی شبکه های اجتماعی در جوملا nooshin88 0 488 02-27-2018، 11:25
آخرین ارسال: nooshin88
  چگونگی فعال کردن گوگل ریکپچا در سیستم مدیریت محتوای جوملا nooshin88 0 610 02-14-2018، 11:36
آخرین ارسال: nooshin88
  چگونگی استفاده از فیلدهای سفارشی در جوملا ۳.۷ nooshin88 0 825 05-16-2017، 11:37
آخرین ارسال: nooshin88
  چگونگی پیروزی کسب و کارهای کوچک دربرابر رقیبان قدرتمند nooshin88 0 681 04-19-2017، 10:09
آخرین ارسال: nooshin88
  چگونگی طراحی منوی شناور nooshin88 0 783 12-24-2016، 11:22
آخرین ارسال: nooshin88
  چگونگی مدیریت ماژول‌ها در جوملا nooshin88 0 747 09-05-2016، 11:32
آخرین ارسال: nooshin88
  چگونگی مدیریت رسانه در محیط جوملا nooshin88 0 718 08-20-2016، 10:22
آخرین ارسال: nooshin88
  چگونگی مدیریت مطالب در محیط جوملا nooshin88 0 681 08-08-2016، 10:59
آخرین ارسال: nooshin88

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
یوهاستینگ در بهمن سال 1389 با هدف ارائه خدمات میزبانی وب تاسیس گردید که در مدت زمانی نچندان کوتاه توانست در چهارمین جشنواره وب ایران سال 1390 عنوان هاستینگ برگزیده را به دست آورد.