توليد خصائص CSS مخصصة مع معاينة مرئية. أنشئ متغيرات الألوان والتباعد والخطوط وعاينها فورًا وصدرها كـ CSS.
أدوات المطورين
حول هذه الأداة
مولد متغيرات CSS يساعدك في إنشاء وإدارة خصائص CSS المخصصة من خلال محرر مرئي. يوفر قوالب سمات جاهزة مثل الفاتح والداكن والأزرق، ومعاينة فورية لنظام التصميم، ومنتقي ألوان تلقائي للقيم، وتصدير بنقرة واحدة كملف CSS.
الميزات الرئيسية
- قوالب سمات مسبقة: فاتح وداكن وأزرق
- لوحة معاينة فورية تعرض تأثير نظام التصميم
- منتقي ألوان تلقائي لقيم متغيرات الألوان
- إضافة وتحرير وحذف المتغيرات المخصصة بحرية
- نسخ CSS أو تحميله كملف .css بنقرة واحدة
- تصور متغيرات الألوان والتباعد في المعاينة
حالات الاستخدام
- إنشاء نظام تصميم متسق باستخدام خصائص CSS المخصصة
- عمل نماذج أولية لتنويعات السمات قبل تنفيذ الكود
- توليد مجموعات متغيرات للوضع الداكن والوضع الفاتح
- تصدير ملفات متغيرات CSS جاهزة للاستخدام إلى المشاريع
- تصور كيفية تأثير متغيرات الألوان والتباعد على مكونات واجهة المستخدم
css
variables
generator
الأسئلة الشائعة
ما القوالب المتاحة؟
توفر الأداة قوالب سمات: فاتح وداكن وأزرق، مع متغيرات مهيأة مسبقًا للألوان والتباعد والخطوط وأنصاف الأقطار. يمكنك أيضًا استخدام القالب المخصص للبدء من الصفر.
هل يمكنني إضافة متغيرات مخصصة؟
نعم، يمكنك إضافة أي عدد من المتغيرات المخصصة باستخدام زر إضافة متغير. لكل متغير حقلا اسم وقيمة، وتحصل قيم الألوان تلقائيًا على منتقي ألوان ومربع معاينة.
كيف تعمل المعاينة الفورية؟
تعرض لوحة المعاينة الفورية مثالاً لواجهة مستخدم تُعرض فورًا باستخدام متغيرات CSS الخاصة بك. تعرض أزرارًا وبطاقات ومربعات ألوان منسقة بمتغيراتك، مما يتيح لك رؤية تأثير نظام التصميم قبل التصدير.
كيف أصدر CSS المُنشأ؟
يمكنك نسخ CSS المُنشأ إلى الحافظة بنقرة واحدة أو تحميله كملف .css. المخرجات هي كتلة :root قياسية تحتوي على جميع الخصائص المخصصة، جاهزة للاستخدام في أي مشروع.
ما أنواع المتغيرات التي يمكنني إنشاؤها؟
يمكنك إنشاء أي خصائص CSS مخصصة، بما في ذلك الألوان وقيم التباعد وعائلات الخطوط وأحجام الخطوط وأنصاف الأقطار والمزيد. تُكتشف قيم الألوان تلقائيًا ويُوفر لها منتقي ألوان للاختيار.