0

وبلاگ

صفر تا قهرمان > بلاگ > مقالات > طراحی و توسعه‌ی وب > مقایسه LESS و SASS

مقایسه LESS و SASS

بهمن 28, 1395
ارسال شده توسط
طراحی و توسعه‌ی وب
1.07k بازدید

در این مقاله قصد داریم که به مقایسه LESS و SASS ، دو Preprocessor  یا به اصطلاح پیش پردازنده CSS بپردازیم.

اول ببینیم که پیش پردازنده به چه چیزی می گویند.

به طور تحت الفظی پیش پردازنده به برنامه ای گفته می شود که یک نوع داده را به نوع دیگر تبدیل می کند.

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

این راحتی کار را با داشتن قابلیت های بیشتر نسبت به خود CSS ممکن می سازند مثلا ما در پیش پردازنده ها می توانیم از متغیر  ، mixin ، تابع و غیره استفاده کنیم.

از معروف ترین پیش پردازنده های CSS می توان به LESS و SASS اشاره کرد.

ابتدا به معرفی اجمالی این دو پیش پردازنده میپردازیم:

SASS

مخفف syntactically awesome stylesheets میباشد که به زبان Ruby نوشته شده است.

برای نصب آن باید پکیج خود Ruby را نصب داشته باشید که می توانید از این لینک دانلود کنید و  با اجرای دستور زیر در خط فرمان SASS نصب می شود.

gem install sass

پسوند فایل آن هم scss. یا sass. می باشد که فرق آن ها در این است که scss. نسخه جدیدتری از sass. میباشد که برای CSS 3 استفاده می شود.

برای تبدیل کردن sass به scss از دستور زیر استفاده میکنیم. :

# Convert Sass to SCSS
sass-convert styles.sass styles.scss

# Convert SCSS to Sass
sass-convert styles.scss styles.sass

برای یادگیری بیشتر میتوانید به این لینک که داکیومنت SASS می باشد، مراجعه کنید.

LESS

مخفف Leaner CSS می باشد که به زبان JavaScript نوشته شده است.

برای نصب آن کافی است که LESS.js را در صفحه خود include کنیم یا می توانیم از کامپایلر LESS استفاده کنیم که فایلی با پسوند css به ما می دهد.

از کامپایلر های LESS می توان به Crunch ، PhpStorm و SimpLESS اشاره کرد.

ناگفته نماند که از طریق خط فرمان و با کد :

npm install -g less

می توان آن را نصب کرد (اگر کار با npm را بلد نیستید به این لینک مراجعه کنید)

برای تبدیل less به  css می توان از دستور زیر استفاده می کنیم:

lessc styles.less styles.css

برای یادگیری بیشتر میتوانید به این لینک مراجعه کنید.

 

حالا بحث و چالش اصلی ما این است که از کدام استفاده کنیم پس به مقایسه LESS و SASS می پردازیم:

  1. همانطور که گفتیم LESS به زبان JavaScript نوشته شده و SASS به زبان Ruby.
    تفاوت چندانی ندارد که از کدام استفاده می کنیم ولی ممکن است نصب و راه اندازی LESS آسان تر باشد. ولی در کل نباید مبنای انتخاب خود را بر زبانی که پیش پردازنده نوشته شده است ، قرار داد.
  1. LESS فریم ورک های خیلی خوبی مانند Compass که برای SASS داریم ، را ندارد. در واقع بسیاری از افراد فقط برای استفاده از Compass از SASS استفاده می کنند.
  1. در تعریف کردن متغیرها هم تفاوت وجود دارد. SASS از $ و LESS از @ برای تعریف متغیر ها استفاده می کند.فقط تنها مورد می تواند این باشد که در CSS استفاده دیگری از @ مثل media@ داریم.
  1. LESS در حلقه ها فقط می تواند بر روی داده های عددی پیمایش انجام دهد ولی SASS می تواند روی تمام نوع داده ها پیمایش انجام دهد که خیلی کاربردی می باشد.
  1. در هر دو نوع پیش پردازنده شما می توانید خودتان mixin تعریف کنید. معمولا بعد از تعریف کردن mixin دیگر برای تغییر دادن آن اقدام نمی کنید چون در چندین پروژه ممکن است از آن استفاده کرده باشید تغییر دادن آن مقداری مشکلات بوجود می آورد.

در SASS با استفاده از Compass می توان اطمینان  داشت که mixin های خود را آپدیت نگه می دارد پس در موقعیت هایی که ممکن است از قسمتی از یک mixin استفاده کنیم ، را کنترل کنیم.

در LESS هم افزونه ای به نام Less Elements وجود دارد , ولی به اندازه SASS قدرتمند نیست.

  1. فرض کنید که کلاسی دارید که یک سری کد برای استایلینگ دارد و شما می خواهید که یک کلاسی شبیه این کلاس داشته باشید ولی مقداری اضافه تر باشد. در LESS مثل تکه کد زیر عمل میکنیم :

 

.module-b {
.module-a(); /* Copies everything from .module-a down here */
border: 1px solid red;
}

 

ولی در SASS یک مبحثی به نام extend@ داریم که این کار را انجام می دهد که شبیه include می باشد. کد زیر این کار را انجام می دهد:

.module-a {
/* A bunch of stuff */
}
.module-b {
/* Some unique styling */
@extend .module-a;
}

 

SASS قدرت extend کردن placeholder ها را هم دارد ،که با در نامگذاری داخلی کمک میکند که با نام کلاس ها تداخل ایجاد نشود.

  1. قابلیت بعدی استفاده از Media Query ها هستش که با در نظر گرفتن اینکه هردو پیش پردازنده می توان با تودرتو کردن دستورها یا به اصطلاح nesting راحت تر مثلا در تغییرات رزولوشن مانور داد.

در SASS یک تکنیکی به نام respond-to وجود دارد که با استفاده از breakpoint ها  به شما قدرت اضافه کردن media query ها به mixin ها را می دهد.

 

کلام آخر…

اگر اجباری برای استفاده از هر کدام از این پیش پردازنده ها ندارید , پیشنهاد میشود که از SASS استفاده کنید.

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

اشتراک گذاری:
برچسب ها:

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید