جلسه ۵۸ : متغیرها در CSS

• جزئیات
• نوع مطلبآموزشی

مقدمه

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

در مطالب کامل آموزشی css که در این سایت ارائه گردیده است ،تا کنون مطالب پر کاربرد و کلیدی از جمله موضوعات آموزشی افکت گذاری در css با عناوین کار با افکت های سایه در css ، کار با ویژگی Transitions در css و کار با ویژگی انیمیشن در css و افکت گذاری عکس ها در css ، ارائه گردیده است.

همچنین در بحث Responsive طراحی قالب وب سایت نیز مطالب آموزشی پایه دراین زمینه ، با موضوعات استفاده از تنظیمات viewport در css ، استفاده از grid-view در css ،   responsive کردن عکس ها در css  ، آشنایی با انواع فریم ورک های Responsive آماده  و استفاده از grid container در css و … ارائه گردیده است.

در ادمه آموزشها، در این آموزش ، به استفاده از متغیرها (Variables ) در css ، می پردازیم.

variables

استفاده از متغیرها (Variables ) در css

بعد از تعریف کردن متغیر برای style هایی که آماده کرده اید، با استفاده از توابع ()var در css می توانید این محتویات متغیرها را، برای سایر عناصر صفحه وب نیز استفاده کنید.

پشتیبانی در مرورگرها

توابع ()var

ابتدا متغییر ها را باید در قسمت :root یا سلکتور body ، با ساختار زیر تعریف کنید:

۱-نام  متغییر حتما باید با دو dash به شکل (–) شروع شود.

۲- متغییر باید در قالب ساختار زیر تعریف شود:

(var(custom-name, value

• custom-name = نام متغییر است.
• value =  این پارامتر اختیاری بوده و زامانیکه ، مقدار متغییر نا معتبر باشد استفاده می شود.

مثال: در این مثال یک متغییر با نام “main-bg-color –” با مقدار نام یک رنگ ، در قسمت  :root ، تعریف کرده ایم، سپس برای عناصر دیگر از آن استفاده کرده ایم:

مثال ۲- در این مثال ابتدا چند متغیر تعریف کرده، و از آن ها در عناصر دیگر استفاده کرده ایم:

کلام آخر

متغیرها یکی از ساختارهای عمومی در تمام زبان های برنامه نویسی هستند که به منظور نگهداری موقت داده ها کاربرد بسیاری دارند، متغیرها در CSS نیز برای تعریف استایل و استفاده ی چندین باره از آن کاربرد دارد.