آنها چه هستند؟
مانند بسیاری از زبان های برنامه نویسی، از متغیرهای CSS برای ذخیره یک مقدار یا ویژگی استفاده می شود. شما اکثراً آنها را root scoped می کنید، به این معنی که a را می سازید :root کلاس psuedo و متغیرهای موجود در آنها را بسازید. برای ایجاد متغیرهایی که تایپ می کنید -- به دنبال آن نام، سپس مقدار آن را تایپ می کنید. به عنوان مثال می توانیم متغیری بسازیم که با تایپ کردن رنگ سیاه را ذخیره می کند --black: #0000 در ریشه با تایپ کردن از آنها استفاده می کنید var() تابع css و نام کامل آنها را در آن تایپ کنید، به عنوان مثال اگر بخواهیم رنگ متنی را روی سیاه قرار دهیم، باید تایپ کنیم. color: var(--black). همچنین می توانید مقدار متغیر را به صورت محلی به روز کنید، به این معنی که می توانید آنها را در انتخابگرهای مختلف تغییر دهید.
روش رایجی که توسعه دهندگان وب از متغیرهای css استفاده می کنند، ذخیره رنگ ها است. بگویید که یک وب سایت بزرگ با رنگ های هگزا متفاوت درست می کنید. فقط تایپ مجدد رنگ‌های هگزا که استفاده می‌کنید در چند انتخابگر زمان زیادی طول می‌کشد، به علاوه نشان دادن رنگ‌هایی که استفاده می‌کنید به دیگران سخت‌تر خواهد بود (مانند یک قطعه کد). با متغیرهای CSS می‌توانیم تمام رنگ‌های هگز، rgb یا hsl خود را ذخیره کنیم و آنها را رنگ خاصی که هستند نامگذاری کنیم. در اینجا یک مثال است:
آیا می توانید به سرعت رنگ پس زمینه بدن را بدانید؟
body {
background-color: #06D6A0;
}
حالا چطور؟
:root {
--Emerald-green: #06D6A0;
}
body {
background-color: var(--Emerald-green);
}
این نشان می‌دهد که با متغیرهای CSS، افراد می‌توانند رنگ‌های خاصی را که استفاده می‌کنید بهتر درک کنند، و برای توسعه‌دهنده وب آسان‌تر خواهد بود که به جای حفظ کردن رنگ هگزا، رنگ مورد نظر خود را تایپ کند.
اگر تا به حال تصویری را از اینترنت وارد کرده باشید و از آن برای تصویر پس‌زمینه چیزی استفاده کرده باشید، می‌دانید که URL زیباست. طولانی گرفتن خطوط از css شما. من با ساختن یک فایل css خارجی که در آن تمام تصاویر و svg هایم را در متغیرها ذخیره می کنم، با این کار مقابله می کنم. سپس آن فایل را به فایل css اصلی خود وارد می کنم و متغیرها را به عنوان تصاویر پس زمینه برای div های من فرا می خوانم. من الان یک هفته است که از این روش استفاده می کنم و فکر می کنم برای زمانی که وبلاگ نویسی می کنید و از قطعه کد استفاده می کنید یا زمانی که پروژه های واقعاً بزرگی با تعداد زیادی تصاویر دارید مفید است، بنابراین css در فایل اصلی کوتاه تر و راحت تر خواهد بود. فهمیدن. این راهی است برای پاک کردن کد و سپس کاهش اندازه بسته. در اینجا یک مثال است:
ممکن است تصویر پس زمینه بدن را به من بگویید؟
body {
background-image: url('https://images.unsplash.com/photo-1606567595334-d39972c85dbe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80');
}
حالا چطور؟
@import "images.css";
/*Say that we stored a picture of a bird
in a variable on images.css*/
body {
background-image: var(--bird);
}
همانطور که می بینید متغیرهای CSS کد اصلی ما را تا حد زیادی کوتاه می کنند و از آنجایی که ما css را از فایل css تصویر خود وارد کردیم، همه متغیرهای آن را نیز دریافت کردیم.
راه‌های زیادی وجود دارد که مردم از متغیرهای css استفاده می‌کنند، اینها روش‌هایی هستند که من از آنها به عنوان یک توسعه‌دهنده وب جوان استفاده می‌کنم، بنابراین می‌توانید خودتان این روش‌ها را در پروژه خود امتحان کنید! امیدوارم این وبلاگ به شما کمک کرده باشد، پس روز/شب خوبی داشته باشید 👋.
