[-]
آخرین ارسالی ها
نحوه تشخیص تفاوت ترس و اضطراب
شروع کننده:youka آخرین پست توسط:dana12 پاسخ ها:1 روانشناسی نمایش ها:972 زمان:۱۳-۳-۱۳۹۹
بهترین روش مسواک زدن چیست؟
شروع کننده:homakiya آخرین پست توسط:farhad پاسخ ها:4 پزشکی , آرایشی و بهداشتی نمایش ها:1438 زمان:۱۳-۳-۱۳۹۹
آموزش افزونه ارسال پست مهمان
شروع کننده:youkabed آخرین پست توسط:youkabed پاسخ ها:0 طراحی و برنامه نویسی نمایش ها:19 زمان:۱۲-۳-۱۳۹۹
افزونه ارسال پست مهمان AccessPress Anonymous Post Pro
شروع کننده:youkabed آخرین پست توسط:youkabed پاسخ ها:0 طراحی و برنامه نویسی نمایش ها:21 زمان:۱۲-۳-۱۳۹۹
تست روانشناسی عشق
شروع کننده:Nasim90 آخرین پست توسط:dana12 پاسخ ها:1 روانشناسی نمایش ها:27 زمان:۱۳-۳-۱۳۹۹
معرفی رمان کشتن مرغ مقلد
شروع کننده:saharhg آخرین پست توسط:saharhg پاسخ ها:0 ادبیات و شعر و رمان نمایش ها:35 زمان:۱۱-۳-۱۳۹۹
تاریخچه خودکار
شروع کننده:saharhg آخرین پست توسط:saharhg پاسخ ها:0 مقالات نمایش ها:23 زمان:۱۱-۳-۱۳۹۹
جراحی زیبایی در بین بازیگران
شروع کننده:Amin90 آخرین پست توسط:Amin90 پاسخ ها:0 سينما، تلوزيون، تئاتر نمایش ها:28 زمان:۱۰-۳-۱۳۹۹
بازی کامپیوتری در کرونا
شروع کننده:Mari99 آخرین پست توسط:workwood98 پاسخ ها:4 بازیهای کامپیوتری نمایش ها:250 زمان:۱۰-۳-۱۳۹۹
بهترین نوع درب ضد سرقت در ایران
شروع کننده:sana98 آخرین پست توسط:workwood98 پاسخ ها:3 مطالب دیدنی و گفتگوي آزاد نمایش ها:253 زمان:۱۰-۳-۱۳۹۹
جهت حرکت: - سرعت: - (توقف | حرکت) - بارگذاری مجدد


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
متغیرهای css و چگونگی استفاده از آن ها
۳۱-۱-۱۳۹۸, ۰۸:۴۲ صبح
ارسال: #1
متغیرهای css و چگونگی استفاده از آن ها
[تصویر:  css_variables-intro.jpg]
زمانی که پروژه‌های وب شما به مرور پیچیده‌تر و بزرگ‌تر می‌شوند، 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 در طراحی سایت خود استفاده کنید اما نسبت به این تکنولوژی کمی محتاط باشید و بیاد داشته باشید که مرورگرها از ورژنی مشخص به بعد آن‌ها را پشتیبانی می‌کنند.

منبع: طراحی سایت حرفه ای ستروکیت
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع:
1 مهمان

بازگشت به بالابازگشت به محتوا

http://www.baleparvaz.com/baleparvaz.gif