مقایسه پیش پردازنده های Less و Sass و بررسی دقیق آنها

مقایسه پیش پردازنده های Less و Sass و بررسی دقیق آنها : در این مقاله به بررسی دو پیش پردازنده (Less,Sass) میپردازیم .اگر برای انتخاب کردن یکی از این دو پیش پردازنده بر سر دوراهی مانده اید . در این مقاله به شما کمک خواهیم کرد تا یکی از این دو را انتخاب کنید . (البته این مقاله فقط و فقط یک بررسی کلی ولی دقیقی از این دو پیش پردازنده دارد و به شما نمیگوید که کدام یک را انتخاب کن . بلکه شما بر اساس نیاز خود تصمیم بگیرید و بررسی کنید که چه چیزی به فیت کار شماست).

مقایسه پیش پردازنده های Less و Sass و بررسی دقیق آنها
مقایسه پیش پردازنده های Less و Sass و بررسی دقیق آنها

پیش پردازنده چیست؟

پیش پردازنده ها برای هوشمند تر کردن و آسان تر کردن و گسترش سی اس اس به وجود آمده اند که در این مقاله به بررسی ۵ پیش پردازنده برای سی اس اس با نمونه کد های آنها گفته شده است .لازم به ذکر است که این امکاناتی که در پیش پردازنده ها وجود دارد هنوز در سی اس اس بوجود نیامده است .

مقایسه پیش پردازنده های Less و Sass و بررسی دقیق آنها

بسیاری از توسعه دهندگان وب و فرانت اند کار ها بین انتخاب Sass و Less همیشه شک داشته اند و همین انتخاب نیز بسیار بسیار مهم است در صرفه جویی وقت و کارایی و …

ولی در این بین بازهم اگر معیار نیاز و یا اجبار وسط باشد برای مثال :  اگر شرکتتان گفته که از فلان پیش پردازنده استفاده کنید مجبورید که از آن استفاده کنید و به پرفرمنس و محبوبیت و … نیز کاری نخواهید داشت .

installation

مسلما برای شروع و در اول هر کاری راه اندازی و پیکر بندی و نصب آن اولین قدم است . پس با مقایسه نحوه نصب این دو پیش پردازنده شروع خواهیم کرد .همانطور که میدانیم پلتفرم و پایه و اساس این دو پیش پردازنده متفاوت است .

Sass :

سس برای راه اندازی و نصب احتیاج به روبی دارد که شما با استفاده از Command prompt میتوانید روبی را نصب کنید . و تقریبا راهی از طریق GUI نیست و اگر هم وجود داشته باشد چند برنامه پولی هستند که باید آن ها را خریداری کنید .(البته روبی در مک به صورت پیش فرض نصب است)

Less :

نصب و راه اندازی لس بسیار بسیار آسان تر از سس است و شما نیاز دارید تا کتابخانه جاوا اسکریپت آن را به داکیومنت اچ تی ام ال خودتان لینک کنید .این پیش پردازنده برنامه هایی دارد برای کامپایل کردن از طریق GUI که بسیار خوب و البته رایگان هم هستند . برای مثال : ( WinLess  LESS.app).

Extensions

هر دوی این پیش پردازنده ها برنامه های افزودنی یا همان اکستنشن هایی دارند که برای توسعه راحت تر و سریع تر بوجود آمده اند .

Sass :

سس یک اکستنشن به نام Compass دارد که به معنای واقعی همه چیز در یک چیز است . و واقعا امکانات زیاد و خوبی دارد مثل : Helpers, Layout, Typography, Grid Layout و حتی Sprite Imagesاین اکستنشن یک فایل به نام config.rb دارد که ما میتوانیم از طریق آن خروجی های سی اس اس را کنترل کنیم و پرفرمنس های دیگر …

Less :

لینک های زیر چند اکستنشن برای Less است که برای کار کردن با آن ها نیاز دارید تا آن هارا به پروژه خودتا اضافه کنید .

ولی سس همه را در یک اکستنشن بوجود آورده است و با Sprite Images ضربه محکمی به لس زده است .

Language

هر دو سینتکس و نوشتار خاص خودشان را دارند و هر دوی آنها Variable دارند که تنها فرق بین آنها این است که سس با $ متغیر تعریف میکند ولی لس با @ و گرنه فرقی در کارایی نیست . هر دو یک مقداری را در متغیر ذخیره میکنند .

فرق های دیگر در نوشتار و قوانین را در ادامه بررسی خواهیم کرد .

Nesting

Nesting یک امکان بسیار خوب است که سلکتور هارا تکرار نکنیم . و در این مورد هم لس و هم سس شبیه هم هستند .

این نوشتار هم در Less / Sass-Scss وجود دارد :

ولی سس یک حرکت فراتر زده است و به شما اجازه میدهد تا حتی پراپرتی هارا نیز نست Nest کنید . به مثال زیر دقت کنید :

کامپایل شده کد بالا :

واقعا یکی از بهترین امکانات سس همین Nesting در پراپرتی ها است که بسیار بسیار جالب است .

Mixins

تعریف میکسین در سس و لس متفاوت است . به نوشتار در هر دو پیش پردازنده دقت کنید :

Sass:

ولی در لس میکسین را در کلاس سلکتور تعریف میکنیم :

ولی سس یک حرکت فراتر به نام اکستند و ارث بردن دارد که به این شکل است :

کد بالا به کد زیر تبدیل میشود :

Error Notifications

فرض کنید ۱۰۰۰ خط کد نوشته اید و یک جا یک ; یادتان رفته  است .

ارور در هر پیش پردازنده را مشاهده کنید .

Sass :

مقایسه پیش پردازنده های Less و Sass و بررسی دقیق آنها
ارور در سس

Less :

مقایسه پیش پردازنده های Less و Sass و بررسی دقیق آنها
ارور در لس

من شخصا وقتی نوتیفیکیشن ارور در سس را دیدم اصلا درست متوجه نشدم ولی در لس بسیار عالی و قابل فهم تر توضیح داده شده است .

Documentation

داکیومنتیشن هر وبسایت و یا هر تکنولوژی و زبانی یک بخش بسیار بسیار مهم است .

Sass :

سس بر خلاف وبسایت خوب و زیبایش داکیومنتیشن آن زیاد جالب نیست ولی جامع و کلی است .

Less :

داکیومنتیشن وبسایت اصلی این پیش پردازنده بسیار بهتر از سس از نظر ظاهری است که این مسله بسیار مهم است . قوانین تایپوگرافی نمونه کد های بسیار خوب و قابل فهم و…

داکیومنت سایت لس : داکیومنت لس

داکیومنت سایت سس : داکیومنت سس

نتیجه گیری

از نظر شخصی من سس بهتر از لس است  ولی بازهم میگویم که شما هرچیزی را که نیاز دارید و با هرچیزی که خوشحال هستید کار کنید .

علی

سلام من علی هستم یکی از نویسنده های کدفرند و به وب و دنیای اینترنت شدیدا علاقه دارم .

همه مطالب این نویسنده

تاکنون هیچ نظری ثبت نشده است