CSS Preprocessors مقارنة Sass مقابل LESS

هناك عدد من CSS Preprocessor و LESS و Sass و Stylus و Swith CSS ، على سبيل المثال لا الحصر. المغلق المعالج, كما قلنا مرارًا وتكرارًا ، يهدف بشكل أساسي إلى جعل تأليف CSS أكثر ديناميكية وتنظيمًا وإنتاجية. لكن, السؤال هو ، أي منهم يقوم بالعمل بشكل أفضل?

حسنًا ، بالطبع ، لن نلقي نظرة على كل واحد منهم ، بدلاً من ذلك ، سنقارن فقط بين أكثرها شيوعًا: ساس وأقل. لاتخاذ قرار ، سنقارن بين العوامل السبعة: العامل الذي يحقق أداءً أفضل يحصل على نقطة واحدة ؛ في حالة التعادل ، سيتم منح كليهما نقطة واحدة.

هيا نبدأ.

التركيب

لنبدأ بالخطوة الأساسية للغاية, التركيب. تم تصميم كل من Sass و LESS على نظام أساسي مختلف ، يعمل Sass على Ruby بينما LESS هي مكتبة JavaScript (والتي تعمل عليها) كان في الواقع بنيت أيضا على روبي في البدايه).

ساس: يحتاج Sass إلى Ruby لكي يعمل ، في Mac تم تثبيته مسبقًا ، لكن في Windows ربما تحتاج إلى تثبيته قبل أن تتمكن من بدء اللعب مع Sass. علاوة على ذلك ، يحتاج Sass إلى التثبيت من خلال موجه الأوامر أو الأوامر. هناك العديد من تطبيقات واجهة المستخدم الرسومية التي يمكنك استخدامها في مكانها ولكنها ليست مجانية.

أقل: LESS مبنية على JavaScript ، لذا فإن عملية LESS الداخلية سهلة مثل ربط مكتبة JavaScript بمستند HTML الخاص بك. هناك أيضًا عدد قليل من تطبيقات واجهة المستخدم الرسومية للمساعدة في تجميع LESS إلى CSS ومعظمها مجاني وأداء جيد جدًا (مثل WinLess و LESS.app).

استنتاج: أقل من الواضح في الصدارة.

ملحقات

تمتلك كل من Sass و LESS امتدادات لتطوير الويب بشكل أسرع وأسهل.

ساس: في موضوعنا الأخير ، ناقشنا حول Compass ، الامتداد الحالي والشعبي القائم على Sass. يحتوي Compass على عدد من Mixins لكتابة بناء جملة CSS3 في وقت أقل.

لكن Compass تتجاوز مجرد CSS3 Mixins ، فقد أضافت ميزات أخرى مفيدة للغاية مثل Helpers ، Layout ، Typography ، Grid Layout وحتى Sprite Images. لديها أيضا config.rb ملف حيث يمكننا التحكم في إخراج CSS وبعض التفضيلات الأخرى. لذلك ، باختصار ، Compass عبارة عن حزمة الكل في واحد للقيام بتطوير الويب باستخدام Sass.

أقل: تحتوي LESS أيضًا على العديد من الإضافات ، ولكن على عكس Compass الذي يحتوي على كل ما نحتاجه في مكان واحد ، يتم فصل كل منهما عن طريق مطورين مختلفين. لن تكون هذه مشكلة للمستخدمين المتمرسين ، ولكن بالنسبة لأولئك الذين بدأوا للتو بتجربة LESS ، فإنهم يحتاجون إلى قضاء بعض الوقت لاختيار الامتدادات المناسبة التي تناسب سير العمل.

فيما يلي بعض الإضافات القليلة التي قد تحتاج إلى تضمينها في مشروعك:

• CSS3 خلطات: عناصر أقل ، التمهيد المسبق ، خلطات أقل.
• شبكة: 960.gs ، بدون إطار ، Semantic.gs
• نسق: حتى أقل
• متفرقات: تويتر Bootstrap

استنتاج: أعتقد أنه يتعين علينا أن نتفق مع Sass و Compass على أنه ثنائي رائع وأن ميزة Sprite image هي حقًا لعبة kickass ، لذلك نقطة واحدة بالنسبة إلى Sass هنا.

اللغات

كل CSS Preprocessor له لغته الخاصة وهي في الغالب شائعة. على سبيل المثال ، يحتوي كل من Sass و LESS على متغيرات ، لكن لا يوجد فرق كبير في ذلك ، باستثناء Sass يحدد المتغيرات مع $ تسجيل بينما أقل يفعل ذلك مع @ إشارة. ما زالوا يفعلون نفس الشيء: تخزين قيمة ثابتة.

أدناه ، سوف ندرس بعض اللغات الأكثر استخدامًا في كل من Sass و LESS (بناءً على تجربتي).

التعشيش

قاعدة التعشيش هي ممارسة جيدة لتجنب كتابة محددات بشكل متكرر ولكل من Sass و LESS نفس الأسلوب في قواعد التعشيش ؛

ساس / Scss وأقل

 nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ ul padding: 0؛ الهامش: 0  

لكن Sass / Scss تأخذ هذه الطريقة خطوة إلى الأمام من خلال السماح لنا أيضًا بتعشيش الخصائص الفردية ، إليك مثال على ذلك:

 nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ ul padding: 0؛ الهامش: 0  الحدود: style: solid؛ left: width: 4px؛ اللون: # 333333 ؛  اليمين: width: 2px؛ اللون: # 000000 ؛  

هذا الكود سيولد المخرجات التالية.

 nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ نمط الحدود: الصلبة. عرض الحدود اليسرى: 4 بكسل ؛ لون الحدود الأيسر: # 333333؛ عرض الحدود اليمنى: 2 بكسل ؛ لون الحدود الأيمن: # 000000؛  nav ul padding: 0؛ الهامش: 0  

استنتاج: تداخل الخصائص الفردية هو إضافة لطيفة ويعتبر افضل تمرين, خاصة إذا اتبعنا مبدأ DRY (لا تكرر نفسك). لذلك ، أعتقد أنه من الواضح ما هو الأفضل في هذه الحالة.

مزيج وراثة محدد

يتم تعريف Mixins في Sass و LESS بشكل مختلف قليلاً. في ساس نستخدمmixin التوجيه بينما في LESS نقوم بتعريفه باستخدام محدد الفصل. هنا مثال:

ساس / SCSS

 mixin border-radius ($ values) border-radius: $ values؛  nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ تضمين @ دائرة نصف قطرها (10 بكسل) ؛  

أقل

 .border (radius) border-radius:radius؛  nav margin: 50px auto 0؛ العرض: 788 بكسل ؛ الارتفاع: 45 بكسل ؛ .border (10px)؛  

Mixins ، في ساس وأقل ، يستخدم ل تتضمن الخصائص من مجموعة واحدة إلى مجموعة أخرى. في ساس ، يتم استخدام هذه الطريقة بشكل أكبر مع الوراثة محدد. المفهوم متطابق ، ولكن بدلاً من نسخ الخصائص بأكملها ، ستمتد Sass أو تجمع محددات لها نفس الخصائص والقيم باستخدام @تمديد توجيهات.

ألق نظرة على هذا المثال أدناه:

 .circle border: 1px solid #ccc؛ نصف قطر الحدود: 50 بكسل ؛ إخفاء الفائض؛  .avatar extend .circle؛  

سوف ينتج عن هذا الرمز كـ ؛

 .circle ، .avatar border: 1px solid #ccc؛ نصف قطر الحدود: 50 بكسل ؛ إخفاء الفائض؛  

استنتاج: ساس هو خطوة واحدة إلى الأمام من خلال الميراث المختلط و Selectors.

عمليات

يمكن لكل من Sass و LESS إجراء عمليات حسابية أساسية ، ولكن في بعض الأحيان يُرجعان نتائج مختلفة. انظر كيف يؤدون هذا الحساب العشوائي:

ساس / SCSS

 الهامش $: 10 بكسل ؛ div margin: $ margin - 10٪؛ / * خطأ في بناء الجملة: الوحدات غير المتوافقة: '٪' و 'px' * / 

أقل

 @ margin: 10px ؛ div margin: @ margin - 10٪؛ / * = 0px * / 

استنتاج: ساس ، في هذه الحالة ، يفعل ذلك بشكل أكثر دقة ؛ نظرًا لأن٪ و px غير مكافئين ، يجب أن تُرجع خطأً. على الرغم من أنني آمل حقًا أن يكون الأمر كهذا 10px - 10٪ = 9px.

إخطارات الخطأ

من المهم إعلام الخطأ عن الخطأ الذي نقوم به. تخيل آلاف أسطر التعليمات البرمجية وقليلًا من الخطأ في مكان ما في الفوضى. واضح إشعار خطأ ستكون أفضل طريقة لمعرفة المشكلة بسرعة.

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

عندما رأيت هذا الإشعار لأول مرة ، بالكاد أفهمه. أيضا ، يبدو ساس هو خارج قليلا مع حيث الخطأ. وقال أن الخطأ هو على السطر 7, بدلا من 6.

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

استنتاج: تقدم LESS تجربة أفضل في هذا الشأن ، وتفوز.

كابل بيانات

التوثيق جزء مهم للغاية لكل منتج ؛ حتى المطورين المتمرسين سيجدون صعوبة في القيام بالأشياء بدونها كابل بيانات.

ساس: إذا ألقينا نظرة على الوثائق في الموقع الرسمي ، فأنا شخصياً أشعر أنني في منتصف المكتبة ، فالوثائق شاملة للغاية. ومع ذلك ، فإن الشكل والمظهر ، إذا كان هذا يهمك ، ليس حافزًا على القراءة ، بالإضافة إلى أن الخلفية بيضاء واضحة.

العرض التقديمي يشبه إلى حد كبير وثائق W3 أو WikiPedia. لا أعرف ما إذا كان هذا هو معيار عرض الوثائق في الإنترنت ، لكن هذا ليس هو السبيل الوحيد.

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

استنتاج: عرض وثائق LESS أفضل ، على الرغم من أن Sass لديه وثائق أكثر شمولاً ، لذلك أعتقد أننا يمكن أن نسمي هذا واحد.

الفكر النهائي

أعتقد أنه استنتاج واضح ذلك ساس أفضل مع النتيجة الإجمالية لل 5 مقابل 3 لأقل. ومع ذلك ، هذا لا يعني أن أقل شيء سيء. هم فقط بحاجة إلى أن يكون أفضل. في النهاية ، ما زال الأمر متروكًا لقرار المستخدم النهائي باختيار المعالج الأولي الذي يختارونه. سواء كان ذلك ساس أو أقل ، طالما كانت مريحة وأكثر إنتاجية ، فهذا هو الفائز في قائمتهم.

أخيرًا ، إذا كان لديك شيء في الاعتبار حول هذا الموضوع ، فلا تتردد في مشاركته في مربع التعليقات أدناه.