نحوه استفاده از متغیرهای CSS – با مثال کد توضیح داده شده است
اگر در حال ساخت وب سایت یا برنامه های وب هستید، باید بدانید که تکرار کد یک عمل بد در نظر گرفته می شود.
به همین دلیل است که باید یاد بگیرید که چگونه از متغیرهای CSS استفاده کنید تا مقدار کدهای CSS را کاهش دهید و استایل خود را به سطح جدیدی برسانید.
موفق ترین برنامه های وب دارای طراحی های دیدنی هستند. متأسفانه توسعه دهندگان وب برای رسیدن به افکت های مورد نظر نیاز به تهیه حجم زیادی از سبک ها دارند. این ما را مجبور می کند که مقادیری مانند رنگ ها را در بسیاری از عناصر مختلف تکرار کنیم.
خوشبختانه، شیوه نامه های مدرن از متغیرهای CSS پشتیبانی می کنند که به شما امکان می دهد تکرار را در پایگاه کد خود کاهش دهید. برای استفاده از آن به ابزارهای خارجی مانند ماژول های CSS، Less یا SASS نیاز ندارید.
در این راهنمای جامع، من به شما نشان می‌دهم که چگونه می‌توانید از متغیرهای CSS به طور مؤثر استفاده کنید، که نمونه‌های اولیه را در HTML و CSS ساده تا چارچوب‌های پیشرفته‌تر مانند React و Next.js پوشش می‌دهد.
پیش نیازها
این راهنما به افراد مبتدی اختصاص داده شده است، پس برای بهره مندی از آن نیازی به دانش خاصی ندارید.
من چند نمونه را در React و Next.js قرار دادم و آنها را به توسعه دهندگان مبتدی React اختصاص دادم. فقط آن نمونه ها برای درک آنها به دانش اولیه React نیاز دارند. اگر با React کار نمی کنید، راحت از آنها صرف نظر کنید.
متغیرهای CSS چیست؟
متغیرهای CSS (که رسماً آپشن های سفارشی CSS نامیده می‌شود) به توسعه‌دهندگان اجازه می‌دهند تا مقادیر را در شیوه‌نامه‌های CSS مدیریت و مجدداً استفاده کنند. توسعه دهندگان وب می توانند متغیرهای قابل استفاده مجدد را تعریف کنند که می توانند در بسیاری از فایل های CSS استفاده شوند و به روز رسانی کد را آسان تر می کنند. متغیرهای CSS پیاده سازی ویژگی هایی مانند حالت تاریک را بسیار آسان می کنند.
وب سایت های مدرن به مقدار زیادی از سبک ها نیاز دارند و این منجر به تکرار مقادیر CSS در بسیاری از شیوه نامه های مختلف می شود. اکوسیستم سخت تلاش می کرد تا با اختراع ابزارهایی مانند ماژول های SASS، Less و CSS به این مشکل رسیدگی کند، اما همه این ابزارها یک نقص دارند – در نهایت باید در فایل های CSS کامپایل شوند.
خوشبختانه، به لطف متغیرهای CSS، می‌توانیم شیت‌های سبک خود را بدون ابزارهای پیچیده ساده‌سازی کنیم و فرآیندها را بسازیم.
نحوه ایجاد متغیرهای CSS
تعریف متغیر CSS بسیار ساده است. شما می توانید یک متغیر CSS را با استفاده از پیشوند -- و به دنبال آن یک نام دلخواه تعریف کنید، سپس با استفاده از تابع var() یک مقدار به آن اختصاص دهید.
در اینجا نحوه انجام آن آمده است:
:root { /* Backgrounds */ --primary-background: #faf8ef; /* Colors */ --primary-text-color: #776e65; } همانطور که می بینید، من متغیرهای CSS را در داخل کلاس شبه :root تعریف کردم تا آنها را در سطح جهانی در دسترس قرار دهم.
هر متغیر با -- شروع می شود و پس از آن یک نام وجود دارد: --primary-background یا --primary-text-color . در نهایت، من مقادیری را به آن متغیرها اختصاص دادم.
با استفاده از این، من قادر خواهم بود رنگ وب سایت را فقط با تغییر مقادیر آن متغیرها تغییر دهم.
نحوه استفاده از متغیرهای CSS
حالا اجازه دهید به شما نشان دهم که چگونه از متغیرهای CSS برای تعریف پس‌زمینه و رنگ متن جهانی برای وب‌سایت خود استفاده کنید:
body { margin: 0; background: var(--primary-background); color: var(--primary-text-color); } برای استفاده از یک متغیر، باید با استفاده از تابع var() و ارسال نام متغیر به عنوان آرگومان به آنها مراجعه کنید.
خودشه! اکنون وب سایت شما از متغیرهای CSS برای رندر کردن استایل ها استفاده می کند.
توجه : var() helper یک تابع CSS داخلی است، پس برای استفاده از آن به هیچ کتابخانه ای نیاز ندارید.
چگونه از متغیرهای CSS در React استفاده کنیم؟
بسیاری از توسعه دهندگان وب برنامه های وب خود را در React می سازند، پس من به شما نشان خواهم داد که چگونه می توانید مقادیر را دریافت کنید و متغیرهای CSS را در React به روز کنید. بسیاری از برنامه های وب مدرن از حالت تاریک پشتیبانی می کنند و این ویژگی می تواند به یکی از کابوس های یک توسعه دهنده React تبدیل شود.
در مرحله بعد، روشی آسان برای اضافه کردن حالت تاریک در برنامه‌های React فقط با استفاده از متغیرهای CSS به شما نشان می‌دهم.
چگونه مقدار متغیر CSS را در React تنظیم کنیم؟
تغییر مقدار متغیرهای CSS در React ممکن است مشکل باشد زیرا React هیچ ابزاری برای تعامل مستقیم با درخت DOM ارائه نمی دهد. به همین دلیل است که از جاوا اسکریپت ساده برای خواندن و تنظیم متغیرهای CSS استفاده می کنیم.
در اینجا نحوه تنظیم یک متغیر CSS در React آورده شده است:
import { useEffect } from 'react'; export default function Example() { useEffect(() => { document.documentElement.style.setProperty('--primary-background', `black`); document.documentElement.style.setProperty('--primary-text-color', `white`); }, []) return <div style={{color: "var(--primary-text-color"}}>Hello World</div> }; همانطور که می بینید، من از متغیر document جهانی برای ورود به درخت DOM و تغییر ویژگی های سبک استفاده کردم. من از متد setProperty استفاده کردم که به دو آرگومان نیاز دارد:
نام ویژگی سفارشی CSS (متغیر CSS).
مقدار متغیر.
توجه : فرقی نمی کند که در React کار می کنید یا جاوا اسکریپت ساده، همیشه می توانید document.documentElement.style.setProperty را برای تغییر مقادیر متغیر CSS فراخوانی کنید. این یک تابع جاوا اسکریپت داخلی است.
چگونه مقدار متغیرهای CSS را در React بدست آوریم؟
گاهی اوقات ممکن است لازم باشد مقدار یک متغیر CSS را بخوانید و آن را در React ذخیره کنید. در این مورد، من استفاده از قلاب های useState و useEffect را پیشنهاد می کنم.
در اینجا نحوه برخورد من با این موضوع است:
import { useEffect, setState } from 'react'; export default function Example() { const [color, setColor] = useState('black'); useEffect(() => { const cssColor = document.documentElement.style.getPropertyValue('--primary-text-color'); setColor(cssColor); }, []) return <div style={{color: color}}>Hello World</div> }; همانطور که می بینید، من مقدار یک متغیر --primary-text-color به ثابت cssColor بازیابی کردم. در خط بعدی، وضعیت کامپوننت را با استفاده از راهنما setColor ایجاد شده توسط useState hook به روز کردم. با استفاده از متد، متغیر CSS من به راحتی در React Components قابل استفاده است.
خودشه. اکنون می توانید از این متغیر در برنامه React خود استفاده کنید.
نتیجه
متغیرهای CSS را می توان در انواع مختلف وب سایت ها استفاده کرد و برای استفاده از آنها نیازی به جاوا اسکریپت نیست. همه می توانند از آنها بهره ببرند - صرف نظر از سطح تجربه آنها در توسعه وب. درک متغیرهای CSS می تواند تجربه استایل شما را تا حد زیادی بهبود بخشد و شما را کارآمدتر کند.
امیدوارم این مقاله را دوست داشته باشید. اگر آن را در رسانه های اجتماعی خود به اشتراک بگذارید، برای من یک دنیا مهم است.
اگر سؤالی دارید یا فقط می‌خواهید به‌روزرسانی‌های من را بشنوید، می‌توانید من را در توییتر پیدا کنید.
React را یاد بگیرید
اگر هنوز در حال یادگیری React هستید یا می خواهید ترفندهای بیشتری مانند این یاد بگیرید، باید به دوره من در Next.js بپیوندید. Next.js محبوب ترین فریم ورک React است که این روزها بیشترین قدرت را در برنامه React دارد. نحوه استفاده از آن را با ساخت یک بازی عالی 2048 با انیمیشن به شما آموزش می دهم. بدون کرک. فقط تاکتیک
🚀 به m y Next.js Crash Course بپیوندید .
این دوره شامل:
🎥 5.5 ساعت ویدیوی درخواستی
📱 دسترسی به موبایل و تلویزیون
🗓️ دسترسی تمام عمر
🎓 گواهی پایان کار
برای شروع کلیک کنید
برچسب‌ها
|
ارسال نظر