انتقل إلى المحتوى
Numio

تحويل SCSS إلى CSS — Numio

يترجم SCSS (.scss، صياغة الأقواس المعقوفة) إلى CSS عادي باستخدام Dart Sass، ثم يضيف بادئات المتصفحات عبر Autoprefixer. تُفكّ المتغيرات و@mixin/@include والتداخل والوحدات المدمجة مثل sass:math إلى قواعد CSS مسطّحة.

الحصول على CSS مترجم من مقتطف .scss (مثل مكوّن على نمط Bootstrap) للصقه في مشروع لا يحتوي على خطوة بناء Sass.

Scss

CSS

متى تستخدمها

  • الحصول على CSS مترجم من مقتطف .scss (مثل مكوّن على نمط Bootstrap) للصقه في مشروع لا يحتوي على خطوة بناء Sass.
  • تتبّع كيفية فكّ التداخل ومحددات & ودوال الألوان مثل darken() قبل إيداع تغييرات SCSS.

طريقة الاستخدام

  1. الصق SCSS في محرر Scss أو اسحب ملف .scss وأفلته عليه.
  2. افتح Settings لاختيار أهداف Autoprefixer: defaults وnot ie < 11 وlast 2 versions وiOS 7 وlast 3 iOS versions. في البداية يكون "defaults" وحده مفعّلًا.
  3. انسخ النتيجة من لوحة CSS؛ وهي CSS عادي يمكنك حفظه مباشرة كملف .css.

إدخال SCSS

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

التفاصيل والقيود

تجري الترجمة على الخادم: ترسل الصفحة شيفرتك إلى /api/sass-to-css، الذي يستدعي compileString من Dart Sass بصياغة scss. ثم يعمل Autoprefixer وتنسيق Prettier في Web Worker داخل متصفحك.

يُترجَم كل إدخال كملف واحد مستقل. يفشل @use أو @import للملفات الجزئية (partials) الخاصة بك مع الخطأ "Can't find stylesheet to import"؛ بينما تعمل الوحدات المدمجة مثل @use "sass:math".

إذا لم ينتج الإدخال أي CSS (متغيرات أو mixins أو دوال فقط)، تكون النتيجة تعليق CSS واحدًا يفيد بعدم توليد CSS، بدلًا من خطأ.

FAQ

هل يدعم @use "sass:math" والوحدات المدمجة الأخرى؟

نعم. الوحدات المدمجة مثل sass:math وsass:color وsass:map متاحة لأن الشيفرة تُترجَم بواسطة Dart Sass. يفشل فقط استيراد ملفاتك، لأنه لا يُرسَل سوى النص الملصوق.

هل تُرسَل شيفرة SCSS الخاصة بي إلى خادم؟

نعم. ترسل الصفحة الشيفرة إلى نقطة النهاية /api/sass-to-css الخاصة بها للترجمة. ثم تُضاف البادئات ويجري التنسيق في متصفحك. تجنّب لصق شيفرة لا يُسمح لك بمشاركتها.

هل يمكنني استخدامه لصياغة المسافات البادئة .sass؟

لا، تترجم هذه الصفحة بصياغة SCSS، لذا يتعذر تحليل الشيفرة المعتمدة على المسافات البادئة. استخدم صفحة Sass to CSS التي ترسل علامة صياغة المسافات البادئة إلى الواجهة البرمجية نفسها.

كيف أحصل على بادئات المتصفحات للمتصفحات القديمة؟

افتح Settings وفعّل أهدافًا مثل "last 2 versions" أو "not ie < 11". تُمرَّر الاستعلامات المختارة إلى Autoprefixer كقائمة المتصفحات الخاصة به.

المواصفات والمراجع