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

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

يترجم Sass بصياغة المسافات البادئة (.sass، دون أقواس معقوفة أو فواصل منقوطة) إلى CSS عادي باستخدام Dart Sass، ثم يشغّل Autoprefixer للمتصفحات المستهدفة التي تختارها. تُفكّ المتغيرات والـ mixins (=name / +name) والتداخل إلى قواعد CSS مسطّحة.

معرفة ناتج ترجمة ملف .sass بصياغة المسافات البادئة من مشروع قديم على نمط Rails أو Bulma دون إعداد أدوات Sass.

Sass

CSS

متى تستخدمها

  • معرفة ناتج ترجمة ملف .sass بصياغة المسافات البادئة من مشروع قديم على نمط Rails أو Bulma دون إعداد أدوات Sass.
  • إنتاج CSS عادي من مقتطف .sass للصقه في نظام إدارة محتوى أو قالب بريد إلكتروني أو codepen لا يقبل Sass.

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

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

إدخال Sass

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #0b63f3;
}

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

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

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

تعتمد بادئات المتصفحات على الأهداف المختارة. في المثال، تحصل user-select على البادئتين -webkit- و-moz- مع الاستعلام "defaults".

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

FAQ

ما الفرق بين Sass وSCSS هنا؟

تتوقع هذه الصفحة صياغة المسافات البادئة: التداخل بالمسافات البادئة، دون أقواس معقوفة أو فواصل منقوطة، مع الاختصارين =mixin و+include. للشيفرة ذات الأقواس المعقوفة استخدم صفحة SCSS to CSS؛ فكلتاهما تستدعيان الواجهة البرمجية نفسها مع علامة صياغة مختلفة.

هل يمكنني استيراد ملفات جزئية مثل _variables.sass؟

لا. يترجم الخادم النص الملصوق فقط، دون نظام ملفات أو مسارات تحميل، لذا يفشل استيراد ملفاتك. الصق محتوى الملف الجزئي فوق الشيفرة التي تستخدمه بدلًا من ذلك.

ماذا يحدث إذا كان ملفي يحتوي على متغيرات أو mixins فقط؟

لا يُخرج Sass أي CSS للتصريحات التي لا تُستخدم، لذا تعرض الصفحة التعليق /* No CSS generated: ... */. أضف قاعدة تستخدم المتغيرات أو تُضمّن الـ mixin للحصول على مخرجات.

هل المخرجات مصغّرة؟

لا. يُخرَج CSS بشكل موسّع ومنسّق باستخدام Prettier. وتُكتب المحددات المتداخلة مثل &:hover كقواعد منفصلة مثل .button:hover.

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