محوّل Stylus إلى CSS
قم بتجميع كود Stylus المعالج المسبق إلى CSS قياسي. أداة مجانية تعمل في المتصفح.
Stylus المدخل
CSS المحوَّل
أمثلة Stylus إلى CSS
يتم تجميع متغيرات Stylus والتداخل إلى CSS قياسي. مثال:
متغيرات ومحددات متداخلة
Stylus المدخل:
CSS المجمَّع:
استخدم زر مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو Stylus إلى CSS؟
Stylus هو معالج CSS مسبق يتميز بأقواس معقوفة اختيارية ومتغيرات ومزجات وتداخل. مثل Sass وLess، يُجمَّع إلى CSS قياسي للمتصفحات. تحوّل هذه الأداة Stylus إلى CSS في متصفحك - بدون خطوة بناء. تُحدد مواصفة W3C CSS المخرج.
الصق Stylus أو حمّل ملف .styl. تدعم الأداة المتغيرات والتداخل ومحدد الأصل &. تعمل بالكامل في متصفحك. لـ SCSS أو Less استخدم SCSS إلى CSS أو Less إلى CSS. لتنسيق النتيجة استخدم منسق CSS.
كيفية استخدام هذه الأداة
الصق أو ارفع Stylus
الصق كود Stylus في المحرر الأيسر أو انقر على رفع لتحميل ملف .styl. استخدم مثال لتحميل Stylus نموذجي مع متغيرات وتداخل.
اعرض نتيجة CSS
تعرض اللوحة اليمنى CSS المجمَّع. لـ Stylus المعقد (مزجات، دوال، استيرادات) قد تكون هناك حاجة للـ مجمّع Stylus الرسمي. للتحقق من الصحة استخدم محقق CSS.
نسخ أو تنزيل
استخدم نسخ أو تنزيل لحفظ CSS. للضغط استخدم مضغط CSS. لتحويل CSS إلى SCSS أو Less استخدم CSS إلى SCSS أو CSS إلى Less.
أين يكون تحويل Stylus مفيدًا
يُستخدم Stylus في المشاريع المبنية باستخدام Vite وWebpack أو Gulp. عندما تريد تجميع مقتطف كود بدون بناء كامل، أو التحقق مما ينتجه Stylus، تساعد هذه الأداة. تستخدم خطوط بناء البناء عادةً حزمة Stylus الرسمية.
لمعالجات CSS المسبقة الأخرى استخدم SCSS إلى CSS أو Less إلى CSS. لدمج ملفات CSS استخدم دامج CSS. لاستخراج CSS من HTML استخدم مستخرج CSS.
الأسئلة الشائعة
هل بياناتي خاصة؟
نعم. يعمل التحويل بالكامل في المتصفح. لا يُرسل أي بيانات إلى أي خادم.
هل يدعم جميع ميزات Stylus؟
تدعم هذه الأداة المتغيرات والتداخل ومحدد الأصل &. قد تتطلب المزجات والدوال و@import والميزات المتقدمة الأخرى المجمّع الرسمي.
Stylus مقابل SCSS مقابل Less؟
جميعها معالجات CSS مسبقة. يمتاز Stylus ببناء جملة خفيف (أقواس معقوفة وفواصل منقوطة اختيارية). SCSS متوافق مع CSS. Less مشابه لـ SCSS. استخدم ما يناسب مجموعة تقنياتك.
كيف تعمل darken() وlighten()؟
لا يتم احتساب الدوال المدمجة في Stylus مثل darken() بواسطة هذا المحوّل الأساسي. للدعم الكامل استخدم مجمّع Stylus الرسمي في بنائك.
هل يمكنني تحويل CSS إلى Stylus؟
تحوّل هذه الأداة فقط Stylus إلى CSS. لتحويل CSS إلى معالج مسبق آخر استخدم CSS إلى SCSS أو CSS إلى Less.