مقایسه پیش پردازنده های 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 است که برای کار کردن با آن ها نیاز دارید تا آن هارا به پروژه خودتا اضافه کنید .
- سی اس اس ۳ میکسین : LESS Elements, Preboot, LESS Mixins.
- گرید : 960.gs, Frameless, Semantic.gs
- لی اوت : Even.less
- میسک : Twitter Bootstrap
ولی سس همه را در یک اکستنشن بوجود آورده است و با Sprite Images ضربه محکمی به لس زده است .
Language
هر دو سینتکس و نوشتار خاص خودشان را دارند و هر دوی آنها Variable دارند که تنها فرق بین آنها این است که سس با $ متغیر تعریف میکند ولی لس با @ و گرنه فرقی در کارایی نیست . هر دو یک مقداری را در متغیر ذخیره میکنند .
فرق های دیگر در نوشتار و قوانین را در ادامه بررسی خواهیم کرد .
Nesting
Nesting یک امکان بسیار خوب است که سلکتور هارا تکرار نکنیم . و در این مورد هم لس و هم سس شبیه هم هستند .
این نوشتار هم در Less / Sass-Scss وجود دارد :
nav { margin: 50px auto 0; width: 788px; height: 45px; ul { padding: 0; margin: 0; } }
ولی سس یک حرکت فراتر زده است و به شما اجازه میدهد تا حتی پراپرتی هارا نیز نست Nest کنید . به مثال زیر دقت کنید :
nav { margin: 50px auto 0; width: 788px; height: 45px; ul { padding: 0; margin: 0; } border: { style: solid; left: { width: 4px; color: #333333; } right: { width: 2px; color: #000000; } } }
کامپایل شده کد بالا :
nav { margin: 50px auto 0; width: 788px; height: 45px; border-style: solid; border-left-width: 4px; border-left-color: #333333; border-right-width: 2px; border-right-color: #000000; } nav ul { padding: 0; margin: 0; }
واقعا یکی از بهترین امکانات سس همین Nesting در پراپرتی ها است که بسیار بسیار جالب است .
Mixins
تعریف میکسین در سس و لس متفاوت است . به نوشتار در هر دو پیش پردازنده دقت کنید :
Sass:
@mixin border-radius ($values) { border-radius: $values; } nav { margin: 50px auto 0; width: 788px; height: 45px; @include border-radius(10px); }
ولی در لس میکسین را در کلاس سلکتور تعریف میکنیم :
.border(@radius) { border-radius: @radius; } nav { margin: 50px auto 0; width: 788px; height: 45px; .border(10px); }
ولی سس یک حرکت فراتر به نام اکستند و ارث بردن دارد که به این شکل است :
.circle { border: 1px solid #ccc; border-radius: 50px; overflow: hidden; } .avatar { @extend .circle; }
کد بالا به کد زیر تبدیل میشود :
.circle, .avatar { border: 1px solid #ccc; border-radius: 50px; overflow: hidden; }
Error Notifications
فرض کنید ۱۰۰۰ خط کد نوشته اید و یک جا یک ; یادتان رفته است .
ارور در هر پیش پردازنده را مشاهده کنید .
Sass :
Less :
من شخصا وقتی نوتیفیکیشن ارور در سس را دیدم اصلا درست متوجه نشدم ولی در لس بسیار عالی و قابل فهم تر توضیح داده شده است .
Documentation
داکیومنتیشن هر وبسایت و یا هر تکنولوژی و زبانی یک بخش بسیار بسیار مهم است .
Sass :
سس بر خلاف وبسایت خوب و زیبایش داکیومنتیشن آن زیاد جالب نیست ولی جامع و کلی است .
Less :
داکیومنتیشن وبسایت اصلی این پیش پردازنده بسیار بهتر از سس از نظر ظاهری است که این مسله بسیار مهم است . قوانین تایپوگرافی نمونه کد های بسیار خوب و قابل فهم و…
داکیومنت سایت لس : داکیومنت لس
داکیومنت سایت سس : داکیومنت سس
نتیجه گیری
از نظر شخصی من سس بهتر از لس است ولی بازهم میگویم که شما هرچیزی را که نیاز دارید و با هرچیزی که خوشحال هستید کار کنید .