سلام به همه، موضوع متغیرها در CSS مدتهاست که در اینترنت دست به دست می شود، اما همه نمی دانند چیست، و خود این فناوری چندی پیش منتشر شد. و اگرچه در بسیاری از موارد استفاده از آن خیلی زود است، اما زمان آن رسیده است که بفهمیم چیست و چگونه از آن استفاده کنیم. بیایید سعی کنیم با هم تکنولوژی را درک کنیم. اجازه دهید توجه شما را به این واقعیت جلب کنم که این مقاله برای کسانی است که از آن اطلاعی ندارند متغیرهای CSS(املاک سفارشی) یا فقط در مورد آنها شنیده اید. اگر با این ویژگی آشنا هستید و می دانید که چگونه با آن کار کنید، این مقاله برای شما جالب نخواهد بود.
بنابراین، مبحث متغیرها در سبک ها قبلاً فرسوده شده است، زیرا ... آنها برای مدت طولانی در پیش پردازنده ها وجود داشته اند. این راحت است، من به سختی می توانم سبک های نوشتن را بدون توانایی ذخیره یک مقدار خاص در جایی تصور کنم (رنگ، اندازه، نام فونت، نوع نشانگر لیست، هر چیزی که به ذهنم می رسد...). با این حال، پیش پردازنده ها نمی توانند انعطاف پذیری را که متغیرهای CSS بومی دارند به ما بدهند، و به زودی خواهید دید که چرا.
ابتدا باید نحوه اعلان و استفاده از متغیرها را بدانید. متغیرها در انتخابگرها اعلام می شوند:
:root ( --body-background: #ccc; ) body ( background-color: var(--body-background); )
همانطور که از لیست بالا می بینید، متغیرها با دو خط فاصله قبل از نام اعلان می شوند:
- متغیر-نام
برای استفاده از یک متغیر، باید از تابع استفاده کنید var. دارای 2 پارامتر این طبیعتاً نام متغیر و دومی است پارامتر اختیاریاین مقدار خاصیتی است که در صورت عدم وجود متغیر باید از آن استفاده شود.
مجموعه امکانات جدید با ورود متغیرها البته به همین جا ختم نمی شود. وجود متغیرها در زرادخانه CSS به ما انعطاف پذیری بیشتری در سبک های نوشتن می دهد. به عنوان مثال، اکنون برای ایجاد یک پرسش رسانه ای برای صفحه نمایش<320px в ширину, не нужно переопределять свойство целиком. Достаточно изменить значение переменной. Т.е.
عنوان ( --wrapper-width: 50%؛ عرض: var(--wrapper-width); ) @media (max-width: 320px) (-wrapper-width: 100%; )
همه! این برای ملک کافی است عرضمعنیش عوض شد!
اگر CSS بتواند تغییرات متغیرهای خود را ردیابی کند، به این معنی است که می‌توان به روش‌های مختلفی با آن تعامل کرد.
در مورد جاوا اسکریپت چطور؟
با دستکاری ویژگی style، می توانید سبک را با حداقل تلاش تغییر دهید. بگذارید یک مثال تقریبی در React به شما بزنم.عنوان (--پس زمینه: آبی؛ پس زمینه-رنگ: var(--بک گراند)؛ )
changeColor() ( this.setState((سبک: ("--بک گراند": "سبز") ));)
حالا روی عنصر با کلاس کلیک کنید عنوانرنگ پس زمینه عنصر تغییر خواهد کرد. سرد؟ هنوز هم می خواهد! شما نیازی به اضافه کردن یک کلاس جدید، نادیده گرفتن یک ویژگی یا انجام هر کار دیگری که رنگ پس‌زمینه عنصر را تغییر می‌دهد، ندارید.
رمارک
اگر کسی با React آشنا نیست یا کسی به سادگی مشخص نیست چه اتفاقی افتاده است. ما به سادگی از جاوا اسکریپت برای تغییر ویژگی style عنصر با تغییر مقدار متغیر استفاده کردیم
--زمینه
با استفاده از متغیرها، تغییر css از خارج آسان تر شده است، می توانید روش های زیادی را برای استفاده در نظر بگیرید، و ما ادامه خواهیم داد.
محدوده
ما باید چند کلمه در مورد دامنه متغیرهای CSS بگوییم، همه چیز در اینجا ساده است. یک متغیر اعلام شده برای همه انتخابگرهای عنصر فرزند آن انتخابگر در دسترس است. آن ها در لیست زیر از یک متغیر استفاده کنید -- بدر برچسب htmlامکان پذیر نخواهد بود. و در اینجا متغیر است --آ V بدنو همه عناصر فرزند بدون مشکل کار خواهند کرد (مگر اینکه در جایی زیر دوباره تعریف شده باشد).متن Html ( --a: #ccc; ) ( --b: #a3a3a3; )
(من می دانم که رنگ های مثال ها خسته کننده هستند، اما در به خاطر سپردن رنگ ها از کد هگز مشکل دارم :))
متغیرها و کالک
مانند هر مقدار ویژگی عددی، می توانید از متغیر در یک تابع استفاده کنید کالک.عنوان (--title-width: 300px؛ عرض: calc(var(--title-width) + 150px)؛ )
سرد! به خصوص با توجه به اینکه متغیر -عرض عنوان، هم در داخل CSS و هم به صورت خارجی قابل تغییر است.
لطفا توجه داشته باشید که باید مقدار را در یک متغیر قرار دهیم. اضافه کردن px, % , رمو غیره. ما نمی توانیم به متغیر فراخوانی شده دسترسی پیدا کنیم. با این حال، هیچ چیز ما را از ضرب با استفاده از تابع باز نمی دارد کالکارزش هر واحد در مقدار مورد نیاز ما.
عنوان ( --title-width: 300; /* این کار نمی کند */ عرض: var(--title-width)px؛ /* این کار می کند */ عرض: calc(var(--title-width) * 1px)
سرانجام
متغیرهای CSS به شما انعطاف پذیری زیادی می دهند و ابزار قدرتمندی هستند که در موارد متعددی می توانند بسیار مفید باشند. با این حال، من عجله برای استفاده از آن در پروژه های جنگی را توصیه نمی کنم. اگر نگاه کنیمانعطافپذیری سفارشی‌سازی قالب‌های صفحه با قابلیت درج عناصر داده‌های مختلف در قالب - مانند، به عنوان مثال، بنرها، سرصفحه‌های صفحه، اطلاعیه‌های خبری - با استفاده از متغیرها تضمین می‌شود.
برای درج متغیرها در قالب صفحه، از لیست کشویی در بالای پنجره الگو استفاده کنید.
به سادگی متغیر مورد نیاز را از لیست انتخاب کنید و در کد صفحه درج می شود.
در قالب صفحه، می‌توانید انواع متغیرهای زیر را وارد کنید: "اشیاء عمومی"; "آخرین اخبار، مقالات"؛ "گروه های بنر"؛ "منو"؛ "اشیاء محدود به یک صفحه." متغیرهایی از قبیل "آخرین اخبار، مقالات"، "گروه های بنر" و "منو" توسط کاربران ایجاد می شوند، بقیه به طور پیش فرض در سیستم وجود دارند.
متغیرهای بخش " آخرین اخبار، مقالاتفهرستی از تمام اعلان‌های صفحه‌های خبری ایجاد شده تا این لحظه را ارائه می‌کند، که نوع اعلان به عنوان «آخرین N- ورودی در صفحه دیگر» مشخص شده است (در این مورد در بخش مربوطه کتابچه راهنمای بیشتر بخوانید). 
در کد صفحه، متغیر اعلام خبر به نظر می رسد
(شناسه اطلاعیه ها=№№)
، جایی که №№ شناسه اعلامیه است.
برای سهولت در شناسایی متغیرها، بهتر است برای چنین اعلان‌هایی دقیق‌ترین نام ممکن را قرار دهید، همچنین می‌توانید روی شناسه اعلامیه (اعداد بعد از شناسه در عنوان اعلامیه) تمرکز کنید. مهم است که به یاد داشته باشید که اعلامیه، پس از درج آن در قالب صفحه، تنها در صفحاتی که در قالب خبری در برگه "قوانین تشکیل بلوک" مشخص شده اند، نمایش داده می شود.
متغیرهای بخش " گروه های بنر"نماینده لیستی از همه گروه های بنر ایجاد شده تا این لحظه (در این مورد در بخش مربوطه کتابچه راهنمای بیشتر بخوانید).
(شناسه بنر=№№)
، که در آن №№ شناسه گروه بنر است.
برای سهولت در شناسایی متغیرها، بهتر است به گروه های بنر دقیق ترین نام ها را بدهید، همچنین می توانید روی شناسه گروه بنر (اعداد بعد از شناسه در هدر) تمرکز کنید.
متغیرهای بخش " منوفهرستی از تمام منوهای ایجاد شده تا این مرحله را نشان می دهد (در این مورد در بخش مربوطه کتابچه راهنمای بیشتر بخوانید).
در کد صفحه، متغیر الگو به نظر می رسد
(شناسه منو=№№)
، که در آن №№ شناسه منو است.
برای آسان‌تر کردن شناسایی متغیرها، بهتر است فهرست‌ها را با جزیی‌ترین نام‌ها انتخاب کنید، همچنین می‌توانید روی شناسه منو (اعداد بعد از شناسه در عنوان) تمرکز کنید. مهم است که به یاد داشته باشید که منوها فقط در صفحاتی ظاهر می شوند که در برگه ویژگی های عمومی قالب منو مشخص شده اند.
اکنون متغیرهای گروه را در نظر می گیریم " اشیاء عمومی"، یعنی متغیرهای موجود برای درج در قالب صفحه پیش فرض.
| متغیر | هدف |
|---|---|
| (عنوان صفحه) | عنوان صفحه. مربوط به عنوان مشخص شده در قسمت "عنوان" در فرم ایجاد/ویرایش صفحه (به بخش مربوطه کتابچه راهنمای کاربر مراجعه کنید)، با نام صفحه در ساختار سایت مطابقت دارد. برای نمایش عنوان در متن صفحه استفاده می شود. |
| (page_full_title) | عنوان صفحه کامل مربوط به عنوان مشخص شده در قسمت "عنوان کامل" در فرم ایجاد/ویرایش صفحه (به بخش مربوطه کتابچه راهنمای کاربر مراجعه کنید). معمولاً به عنوان برچسب استفاده می شود |