SASS مقابل SCSS: الفرق والمقارنة

لا يوجد فائز واضح بين SASS و SCSS عندما يتعلق الأمر بمعالجات CSS المسبقة. عندما يتعلق الأمر بالاستفادة من إمكانات CSS برمجيًا ، فإن كلا من إطار عمل SASS و SCSS يوفران ميزات رائعة.

على عكس SASS ، وهو شكل من أشكال امتداد CSS ، فإن SCSS هي نسخة مبسطة من CSS ، مع تضمين جميع عناصرها.

الوجبات السريعة الرئيسية

1. Sass هو معالج مسبق لـ CSS مع بناء جملة أكثر إيجازًا وقابلية للقراءة مقارنةً بـ CSS التقليدي ، بينما SCSS هو إصدار أحدث من Sass يستخدم بنية مشابهة لـ CSS.
2. يسمح Sass بتداخل قواعد ومتغيرات CSS ، مما يجعل كتابة وتنظيم أوراق الأنماط أسهل ، بينما تتطلب SCSS فاصلة منقوطة وأقواس متعرجة.
3. ملفات Sass لها امتداد “.sass” ، بينما ملفات SCSS لها امتداد “.scss”.

SASS مقابل SCSS

يتمثل الاختلاف بين SASS و SCSS في أن لوائح CSS المتداخلة ، والوراثة ، وأوراق الأنماط الرائعة لبناء الجملة الخاصة بـ SASS توفر ميزات mixin ، بينما تملأ أوراق الأنماط المتتالية الخاصة بـ SCSS داخل الثغرات والتناقضات بين CSS و SASS. تم استخدام ترخيص معهد ماساتشوستس للتكنولوجيا. ظهرت لأول مرة في عام 2006.

كانت SASS في البداية جزءًا من Haml ، وهي وحدة معالجة مسبقة كتبها روبي المطورين. نتيجة لذلك ، فإن بنية ورقة الأنماط مماثلة لتلك الخاصة بـ روبي كان موظف.

يشار إلى Sass عادة على أنها لغة ما قبل المعالجة وكذلك لغة عند مخاطبتها. هذه أداة نمطية وصفية ، و Sass مثال.

SCSS ، على عكس SASS ، أقرب إلى CSS من SASS. على الرغم من ذلك ، قام كل من ميسري SCSS و SASS بحملة للوصول إلى الصيغتين بالقرب من بعضهما البعض أثناء تحويل علامة السمات! من SCSS إلى $ و: من SASS.

جدول المقارنة

معلمات المقارنة	SASS	SCSS
تعريف	ورقة الأنماط الرائعة من الناحية النحوية هي اختصار لـ SASS. يوسع Sass ، وهو مكون إضافي لـ CSS ، قدرات CSS.	Sassy Cascading Style Sheets هو اختصار لـ SCSS. SCSS هو شكل محسّن أكثر من CSS.
الأستعمال	يتم استخدام SASS عندما يتطلب إنشاء برنامج استخدام بناء الجملة الأصلي.	لا توجد متطلبات أو معايير موجودة لبناء جملة التعليمات البرمجية المستخدمة مع SCSS.
الاندماج	لا توجد قيود على كيفية دمج SASS في أي مشروع ، حيث إنها تتعامل مع جميع إصدارات CSS.	نظرًا لأن SCSS هو الشكل العام لـ CSS ، فقد يتم تضمينه في أي حزمة أو برنامج.
بناء الجملة	متطلبات بناء جملة SASS ضئيلة ، ويمكن تنفيذ الكود بطريقة مباشرة.	يتم تطبيق المزيد من القيود على SCSS ، مثل استخدام الفواصل المنقوطة ، على سبيل المثال.
دعم المجتمع	تمتلك SASS مصممًا أكبر بالإضافة إلى تطوير مجتمع أكثر من الأطر الأخرى.	بالمقارنة مع نظيرتها ، فإن SCSS لديها حجم صغير جدًا المطور دعم المجتمع في الواقع.

ما هو SASS؟

كانت SASS في الأصل جزءًا من وحدة المعالجة المسبقة المسماة Haml ، والتي تم تصميمها وإنشاءها بواسطة مبرمجي Ruby. نتيجة لذلك ، تم استخدام بنية ورقة أنماط تشبه روبي.

يتم استخدام المعالج المسبق واللغة بالتبادل أثناء مناقشة Sass. Sass هو مثال للأسلوب التعريفي للغة. من ناحية أخرى، يقبل المعالج المسبق Sass تركيبين بديلين.

على الرغم من أن بناء الجملة هذا قد يبدو غريبًا ، إلا أنه يحتوي على العديد من الجوانب المثيرة للاهتمام. كمكافأة ، فهي أيضًا أقصر وأسهل في الكتابة. لا تحتاج الأقواس والفواصل المنقوطة بعد الآن.

هذا أفضل من ذي قبل! mixin وinclude غير ضروريين عندما يكون الحرف الواحد كافيًا: = و +.

يتم استخدام المسافة البادئة لفرض نظافة الشفرة في بناء جملة Sass.

نظرًا لأنه من المحتمل أن تؤدي المسافة البادئة غير الصحيحة إلى تحطم المستند بأكمله ، تضمن ورقة أنماط sass أن تكون الشفرة دائمًا مرتبة ومنسقة بشكل صحيح. لا يمكن كتابة كود Sass إلا بطريقة واحدة: الطريقة الجيدة.

لكن كن على اطلاع على الحيل! ساس لديه مفهوم المسافة البادئة. تشير المسافة البادئة للمحدد إلى أنه متداخل في السابق.

ما هو SCSS؟

على عكس SASS ، فإن SCSS تشبه CSS أكثر من SASS.

ولكن حتى مع وضع ذلك في الاعتبار ، بذل كل من منفذي SCSS و SASS جهدًا لتقريب الصيغتين معًا عن طريق نقل علامة السمات! وفقًا لقواعد النحو البادئة إلى $ و: from SCSS.

هذا متوافق مع CSS ، بالنسبة للمبتدئين. بمعنى آخر ، هذا يعني أنه يمكنك تغيير اسم ملف CSS الخاص بك ، وسوف تستمر في العمل بشكل صحيح.

لطالما كان الهدف الأعلى لمشرفي Sass جعل SCSS متوافقًا تمامًا مع CSS ، وهذا شيء ضخم. directives هي أيضًا محاولة للبقاء بالقرب من بنية CSS المستقبلية قدر الإمكان.

لا توجد أي دورة تدريبية تقريبًا نظرًا لأن SCSS قابلة للتشغيل المتبادل مع CSS. وعلى أي حال ، فإن CSS هي مجرد CSS مع بعض الإضافات. سيكونون قادرين على بدء البرمجة على الفور دون فهم أي شيء عن Sass ، وهو أمر بالغ الأهمية عند العمل مع مطورين جدد.

الاختلافات الرئيسية بين SASS و SCSS

1. ورقة الأنماط الرائعة من الناحية النحوية هي اختصار لـ SASS. يوسع Sass ، وهو مكون إضافي لـ CSS ، قدرات CSS. من ناحية أخرى ، فإن Sassy Cascading Style Sheets هي اختصار لـ SCSS. SCSS هو شكل محسّن أكثر من CSS.
2. يتم استخدام SASS عندما يتطلب إنشاء برنامج استخدام بناء الجملة الأصلي ، في حين لا توجد متطلبات أو معايير لبناء جملة التعليمات البرمجية المستخدمة مع SCSS.
3. لا توجد قيود على كيفية دمج SASS في أي مشروع ، حيث إنها تتعامل مع جميع إصدارات CSS. نظرًا لأن SCSS هو الشكل العام لـ CSS ، فقد يتم تضمينه في أي حزمة أو برنامج.
4. متطلبات بناء جملة SASS ضئيلة ، ويمكن تنفيذ الكود بطريقة مباشرة. من ناحية أخرى ، يتم تطبيق المزيد من القيود على SCSS ، مثل استخدام الفواصل المنقوطة ، على سبيل المثال.
5. تمتلك SASS مصممًا أكبر بالإضافة إلى تطوير مجتمع أكثر من الأطر الأخرى. بالمقارنة مع نظرائها ، فإن SCSS لديها دعم مجتمع مطور صغير جدًا في الواقع.

مراجع حسابات

1. https://books.google.co.in/books?hl=en&lr=&id=UqZ0dBzm5UEC&oi=fnd&pg=PT8&dq=What+is+SASS+in+CSS&ots=iT4DgOK5cW&sig=hoB9CLV03_Ur3svyJfZ6XjSmc64&redir_esc=y#v=onepage&q=What%20is%20SASS%20in%20CSS&f=false
2. https://link.springer.com/chapter/10.1007/978-1-4302-3289-6_9

آخر تحديث: 31 يوليو 2023