محوّل SCSS إلى CSS
قم بتجميع SCSS/SASS إلى CSS قياسي. أداة مجانية تعمل في المتصفح.
SCSS المدخل
CSS المجمَّع
أمثلة SCSS إلى CSS
يتم تجميع متغيرات SCSS والتداخل إلى CSS قياسي. مثال:
متغيرات ومحددات متداخلة
SCSS المدخل:
CSS المجمَّع:
استخدم زر مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو SCSS إلى CSS؟
SCSS هو معالج CSS مسبق يضيف المتغيرات والتداخل والمزجات والدوال. لا تشغّل المتصفحات SCSS مباشرة - فهي تتطلب CSS قياسيًا. تقوم هذه الأداة بتجميع SCSS الخاص بك إلى CSS جاهز للمتصفح. تُحدد توثيق Sass بناء الجملة.
يعمل التجميع بالكامل في المتصفح. لا يُرسل أي شيء إلى الخادم. النتيجة CSS قياسي. في الاتجاه المعاكس (CSS إلى SCSS) استخدم CSS إلى SCSS. لـ Less استخدم Less إلى CSS.
كيفية استخدام هذه الأداة
الصق أو ارفع SCSS
انسخ SCSS أو SASS الخاص بك والصقه في المحرر الأيسر. يمكنك أيضًا النقر على رفع لتحميل ملف .scss أو .sass. يحمّل زر مثال بيانات نموذجية. سيظهر خطأ لـ SCSS غير الصالح.
اعرض CSS المجمَّع
تعرض اللوحة اليمنى CSS المجمَّع. يتم حل المتغيرات وتسطيح التداخل وتوسيع المزجات. النتيجة CSS قياسي يمكن لأي متصفح استخدامه.
متى يكون SCSS إلى CSS مفيدًا
عندما يكون لديك SCSS من مشروع أو نظام تصميم أو قاعدة كود قديمة، لكنك تحتاج CSS قياسيًا - للاختبار السريع أو قوالب البريد الإلكتروني أو الأنظمة التي لا تحتوي على أدوات بناء - يساعد هذا التجميع. تستخدم أطر مثل Bootstrap وFoundation SCSS. للبنى الإنتاجية، يقوم Dart Sass وwebpack بتجميع SCSS. مفيد أيضًا للتصحيح: ترى بالضبط CSS الذي ينتجه SCSS الخاص بك.
تستخدم كثير من الأطر (Bootstrap، Foundation) SCSS. إذا كنت تخصص المتغيرات أو تستخرج الأنماط، يمنحك التجميع هنا CSS النهائي. لتحويل CSS الحالي إلى بنية SCSS استخدم CSS إلى SCSS.
الأسئلة الشائعة
الفرق بين SCSS و SASS؟
يستخدم SCSS الأقواس المعقوفة كـ CSS. يستخدم SASS المسافات البادئة (بدون أقواس). كلاهما يُجمَّع إلى نفس CSS. تدعم هذه الأداة كلا البنيتين.
هل يدعم @import؟
قد لا يتم حل الاستيرادات الجزئية إذا لم تكن الملفات محمّلة. للمشاريع متعددة الملفات استخدم أدوات البناء مثل Dart Sass أو أداة التجميع. انظر Sass CLI.
هل بياناتي خاصة؟
نعم. يعمل التجميع بالكامل في المتصفح. لا يُرسل أي بيانات إلى أي خادم.
كيف تُعالَج المزجات والدوال؟
يتم توسيع المزجات والدوال أثناء التجميع. يحتوي CSS المخرج على القيم المحلولة. يتم دعم الدوال المعقدة ضمن إمكانيات المجمّع.
هل يمكنني استخدامه مع Bootstrap؟
يحتوي SCSS لـ Bootstrap على كثير من الملفات الجزئية والمتغيرات. للتجميع الكامل لـ Bootstrap استخدم البناء الرسمي أو npm. تعمل هذه الأداة مع SCSS من ملف واحد أو مقتطفات كود.
الأدوات ذات الصلة
Sass/SCSS: sass-lang.com وتوثيق Sass. يُحدد MDN CSS وW3C CSS التنسيق المخرج.