محوّل CSS إلى SCSS
حوّل CSS إلى SCSS مع التداخل والمتغيرات والمزجات. أداة مجانية تعمل في المتصفح.
CSS المدخل
SCSS المحوَّل
أمثلة CSS إلى SCSS
يتم تحويل محددات CSS المسطحة إلى SCSS متداخل. مثال:
بنية متداخلة من CSS مسطح
CSS المدخل:
SCSS المحوَّل:
استخدم زر مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو CSS إلى SCSS؟
يضيف SCSS المتغيرات والتداخل والمزجات إلى CSS. يُعيد تحويل CSS العادي إلى SCSS هيكلته مع التداخل ويجهزه لميزات SCSS. تحلل هذه الأداة CSS الخاص بك وتنتج بنية بأسلوب SCSS. تحدد مواصفات W3C CSS المصدر؛ يحدد Sass المخرج.
يعمل التحويل بالكامل في المتصفح. لا يُرسل أي شيء إلى الخادم. النتيجة SCSS صالح. في الاتجاه المعاكس (SCSS إلى CSS) استخدم SCSS إلى CSS. لـ Less استخدم CSS إلى Less.
كيفية استخدام هذه الأداة
الصق أو ارفع CSS
انسخ CSS الخاص بك والصقه في المحرر الأيسر. يمكنك أيضًا النقر على رفع لتحميل ملف .css. يحمّل زر مثال بيانات نموذجية. سيظهر خطأ لـ CSS غير الصالح.
راجع نتيجة SCSS
تعرض اللوحة اليمنى SCSS المحوَّل. يمكن تداخل المحددات حيث تسمح البنية. يمكنك إضافة المتغيرات والمزجات يدويًا بعد التحويل.
نسخ أو تنزيل
استخدم نسخ أو تنزيل. قم بتجميع SCSS باستخدام SCSS إلى CSS للتحقق. لتنسيق CSS أولًا استخدم منسق CSS.
متى يكون CSS إلى SCSS مفيدًا
عند ترحيل مشروع من CSS عادي إلى SCSS، أو عندما يكون لديك CSS من تصدير مشروع وتريد دمجه مع قاعدة كود مبنية على SCSS (مثل Bootstrap 4+، Foundation)، يوفر هذا التحويل نقطة بداية. تقوم أدوات البناء مثل webpack وVite بتجميع SCSS. تمنحك النتيجة بنية متداخلة يمكنك تحسينها بالمتغيرات والمزجات.
غالبًا ما تُصدر أدوات التصميم مثل Figma CSS عاديًا. بتحويله هنا إلى SCSS، يمكنك إضافته إلى بنية قائمة على المكونات. لـ Less استخدم CSS إلى Less. لبادئات vendor استخدم مضيف بادئات CSS.
الأسئلة الشائعة
هل يضيف متغيرات أو مزجات؟
يركز المحوّل على البنية (التداخل). لا يستخرج القيم المتكررة إلى متغيرات تلقائيًا. أضف المتغيرات والمزجات يدويًا حسب الحاجة.
هل بياناتي خاصة؟
نعم. يعمل التحويل بالكامل في المتصفح. لا يُرسل أي بيانات إلى الخادم.
كيف يعمل التداخل؟
تستنتج الأداة التداخل من العلاقات بين المحددات. المحددات المعقدة قد تبقى مسطحة. راجع وعدّل حسب الحاجة.
CSS إلى SCSS مقابل CSS إلى Less؟
يُنتج كلاهما بناء جملة معالج مسبق. SCSS أوسع انتشارًا (Bootstrap 4+، كثير من الأطر). يُستخدم Less في Bootstrap 3 وAnt Design. اختر بناءً على مجموعة تقنياتك.
هل يمكنني تجميع النتيجة؟
نعم. الصق SCSS في SCSS إلى CSS للتجميع والتحقق. يجب أن تطابق النتيجة بنية CSS الأصلي.
الأدوات ذات الصلة
لـ Sass/SCSS، تفضل بزيارة sass-lang.com وتوثيق Sass. يحدد W3C CSS وMDN CSS التنسيق المصدر. انظر أيضًا Bootstrap، Figma، webpack، Vite.