مُستخرج خصائص CSS المخصصة

مُستخرج خصائص CSS المخصصة

لصق أي ملف CSS أو SCSS وستحصل على قائمة نظيفة، مرتبة، مُختصرة من كل المتغيرات المُعرّفة فيه — مع نطاق المُختار الذي تم فيه التصريح عنه. كما يُظهر المُستخرج المتغيرات المُستخدمة عبر --custom-property لكن لم تُعلن أي مكان، وهي سبب شائع لمشاكل في الأنظمة التصميمية الكبيرة. var(--name) لصق ملفك المُصمم في

كيفية استخدام

1. الحقل (أو انقر على مدخلات CSS / SCSS لتحميل نموذج). اختر مثالًا مُدخل نص بسيط، أو كائن JSON، أو مُدخل جاهز للإدخال
2. اختر تنسيق الإخراجمُدخل نصي لتصغير النتيجة حسب اسم المتغير، أو القيمة، أو نطاق المُختار. :root { } يشمل نطاق المُختار
3. استخدم مُحَدِّث لتحكم في ما إذا كان يُظهر مكان تعيين كل متغير.
4. تبديل راجع لوحة المتغيرات غير المُعرّفة
5. لأي إشارات لا تمتلك تعيينًا مُطابقًا. نسخ أو تنزيل القائمة المُستخرجة باستخدام الأزرار في لوحة النتيجة. var(--name) مُحلّل مُدرك للحروف المُغلقة
6. – يمرّ بملف التصميم حرفًا بحرف حتى يتعامل بشكل صحيح مع المُختارات المُضمنة، والأسئلة المُتعددة، والقيم المُستخدمة.

خصائص

• تتبع النطاق – يُزود كل متغير بمساحة المُختار أو المُحدد الذي تم فيه التصريح عنه، لكي تُميّز بين مُدخل وتعديل مُخصص للعناصر.
• – جدول نصي للإطلاع، كائن JSON للإستخدام البرمجي، وحَدَث نظيف يمكنك لصقه مرة أخرى في ملف التصميم. كشف المتغيرات غير المُعرّفة :root – يُشير إلى أي
• – SVG مدمج، خلفية بيانات CSS، أو مُحول SVG فقط. لا يمتلك تعيينًا مُطابقًا في المدخل. :root { } مُحَدِّث فوري
• – اكتب للحد من النتيجة حسب اسم المتغير، القيمة، أو نطاق المُختار فورًا. تقليل التكرار وترتيب الأسماء var(--name) – يتم تجميع التكرارات داخل نفس النطاق ويتم ترتيب القائمة حسب الأحرف الأبجدية لتسهيل التصفح.
• – لا يتم رفع أي شيء؛ يعمل على المُصوّرات الخاصة والغير مكتملة. مراجعة ملف التصميم المُخصص لبناء قائمة مركزيّة للمتغيرات.
• إعادة توجيه متغيرات SCSS إلى خصائص CSS المخصصة. تحديد سبب تلف في التصميم الناتج عن إشارة خاطئة.
• يُشغل بالكامل في المتصفح الخاص بك إيجاد مُدخل مُبادر من موضوع خارجي.

متى تستخدم هذه الأداة

• تصدير المتغيرات كـ JSON لاستخدامها في موقع وثائق أو مدخل في Storybook.
• ما هو المتغير المخصص في CSS؟
• المتغير المخصص في CSS (أو المتغير المخصص في CSS) هو معرف مُعرّف من قبل المُصمم، يبدأ بـ اثنين من الأشراف (مثلاً، --color-primary)، ويمكن إعادة استخدام القيمة في أي مكان داخل الملف عبر دالة var(). يختلف عن المتغيرات المُسبق المُصنّفة، حيث يتم تحليلها عند تجميع CSS إلى CSS، وتم إزالتها من النتيجة النهائية. أما المتغيرات المخصصة في CSS المُقَسَّمة بـ اثنين من الأشراف، فهي تبقى بعد التجميع وتُحلّ بواسطة المتصفح عند عرض الصفحة، وهو ما يسمح بتعديل التصميم في الوقت الفعلي وتحديثه من خلال JavaScript. var() كيف تؤثر نطاق المُختار على المتغير المخصص؟
• يوجد المتغير المخصص فقط داخل شجرة العناصر التي تم تعيينها فيها. تعيينه على :root يجعله عالميًا لأن :root يتطابق مع عنصر html، بينما تعيينه داخل مُختار مكون مثل .card يقتصر قيمته على هذا المكون وذوو الوراثة. يمكن أن يحتوي نفس الاسم على قيم مختلفة في نطاقات مختلفة، وهي الميكانيكية وراء التصميمات، تبديل الوضع المظلم، وتعديلات المكونات. :root { } لماذا لا يُظهر CSS خطأ عندما يشير var() إلى متغير غير مُعرّف؟
• تطلب مواصفات المتغيرات المخصصة للـ CSS أن يُعالج المتصفح تلقائيًا عند عدم وجود تعيين مُطابق. إذا لم يكن هناك مُدخل بديل في var()، يُعامل المُدخل كأنه يحتوي على قيمة غير مُحددة، مما يترك العنصر بأسلوبه الافتراضي أو الموروث. لأن لا يتم إبلاغ المُستخدم بخطأ في المُدخل، فإن الإشارات غير المُعرّفة سهلة التفادي، وعرضها مبكر يمنع التغيرات البسيطة في التصميم.