تقریبا هر کسی که با Sass کار می کند ، بعد از مدتی از خود می پرسد : بالاخره کدام یک را انتخاب کنم ؟ Compass یا Bourbon ?

احتمالا برایتان سوال پیش آید که اینها چه هستند ؟ Compass و Bourbon فریم ورک های Sass هستند . همانطور که می دانید Sass یک پیش پردازنده Css هست . درسته ؟ اوکی ! همانطور که شما از jQuery , Backbone و یا هر فریم ورک دیگری برای JavaScript استفاده می کنید ، می توانید از یکی از دو گزینه مورد بحث این مقاله نیز برای راحت و سریع و استاندارد شدن کار با Sass استفاده کنید .

در مقاله امروز سعی می کنم فرق این دو فریم ورک Sass رو بررسی کنم ولی در ابتدا می خوام کمی از تاریخچه این ها بگم

تاریخچه

Compass خود را یک فریم ورک(FrameWork) و یا چارچوب Css نگاری برای Sass می نامد . مدیریت آن بر عهده Chris Esstein ، یکی از مدیران Sass ( نسخه Ruby) می باشد. در واقع نصف کامپس Ruby و نصف دیگر آن Sass است و منبعی سرشار از Mixin ها و ابزارها را برای Sass ارائه می دهد.جزئیات بیشتر را در ادامه خواهیم دید

در طرف دیگر Bourbon به وسیله Sass و برای Sass توسط تیم فوق العاده Thoughtbot ایجاد شده است. همانطور که در سایت پروژه اشاره شده ، Bourbon بیشتر یک کتابخانه است تا فریم ورک . یک کتابخانه Mixin ساده و سبک برای Sass.

بنابراین در یک دستمان فریم ورک Ruby/Sass داریم و در دست دیگرمان هم یک کتابخانه میکسین Sass قرار دارد . آیا تفاوت به همین جا ختم می شود ؟

Mixins

Mixin در کل عملکردی شبیه Function در زبان های برنامه نویسی دارد . وقتی از یک کاربر Compass/Bourbon (فرقی ندارد کدام) بپرسید از این ابزار برای چه منظوری استفاده می کند ؟ به احتمال زیاد این پاسخ را می شنوید : هماهنگی در مرورگرهای مختلف . اوکی شاید دقیقا همین را نگویند ولی منظور استفاده از این ابزار معمولا همین است . Compass و Bourbon در کل هر دو مجموعه عظیمی از Mixin ها را برای کار با خصوصیات CSS 3 فراهم می آورند .بنابراین نیاز نیست نگران prefix دستورات و یا هک های Css باشید .

// Compass
el {
  @include box-sizing(border-box);
}
 
// Bourbon
el {
  @include box-sizing(border-box);
}
 
// Doh. Same API. Awesome!

در حقیقت Compass و Bourbon از ساختار مشابهی برای اکثر میکسین هایشان استفاده می کنند که مهاجرت از یکی به دیگری را آسان می سازد .

ولی یک تفاوت مهم این بین وجود دارد : اول از کامپس نسخه 1.0 (منتشر شده با Sass 3.3) شروع می کنم، Compass مستقیما داده های را از Can I Use دریافت می کند ، این به این معناست که تقریبا همیشه با پیشوند های مخصوص مرورگرها (Vendor Prefixers) بروز خواهد بود ، در حالی که بوربون از طریق آپدیت هایی که توسعه دهندگان اش منتشر می کنند بروز می شود .

نکته : البته اگر از Autoprefixer برای پیشوند دادن به وندورها استفاده می کنید ، این مورد برایتان نمی تواند زیاد مهم باشد

 تایپوگرافی

Compass و Bourbon هر دو توابع ، میکسین ها و متغیرهایی مربوط به Typography را فراهم آورده اند .کامپس با ماژول Vertical Rhythm که شامل تعداد زیادی متغیر و چندین mixin است ،پا به میدان گذاشته

// Compass 
$base-font-size: 16px;
$base-line-height: 1.35;
$rhythm-unit: em;
 
element {
  @include adjust-font-size-to(42px);
}
 
element {
  font-size: 2.625em;
  line-height: 1.06071em;
}

همانطور که می بینید کامپس تعداد زیادی ابزار برای این کار فراهم کرده است و اگر یکی از طرفداران تایپوگرافی باشید ، Compass نیازهای شما را پوشش می دهد .

Bourbon مقداری کمتر امکانات مربوط به تایپوگرافی را داراست ولی ابزارهایی خیلی خوبی دارد که برای شروع کافی خواهد بود . فقط نمی توانید px را به em یا rem تبدیل کنید . در عوض توابع جالبی مانند golden-ratio() و modular-scale() را داراست که شاید مستقیما به تایپوگرافی مربوط نباشند ولی هنگامی که می خواهید ریتم یکسانی در کل سایت ایجاد کنید بسیار کارگشا خواهند بود .

در حقیقت تیم Thoughtbot سعی کرده تا نگرانی های مربوطبه تایپوگرافی را در پروژه دیگری (که می تواند به خوبی با بوربون استفاده شود) بگنجاند که Bitters نام دارد . در انتها در مورد این بحث خواهیم کرد .

Grids

کامپس از Blue print برای گرید استفاده می کرد (تا اون جایی که من می دونم هیچ ربطی به فریم ورک قدیمی css بنام Blueprint نداره) . می شود گفت BluePrint کامپس واقعا کم مورد استفاده قرار گرفته است تا جایی که وقتی با خیلی از کاربران کامپس صحبت کردم فقط یک نفر تا به حال Blueprint را امتحان کرده بود.این بدون استفاده بودن تا جایی پیش رفت که Chris Eppstein تصمیم گرفت از نسخه 1.0.0 کامپس به بعد آن را به طور کلی حذف کند .

در ضمن Bourbon شامل Mixin های زیادی است که به شما اجازه می دهد Grid تان را خودتان بسازید . در اینجا flex-* وجود دارد (که هیچ ربطی به FlexBox ندارد) همچنین grid-width() . در حقیقت بوربون سیستم گرید مخصوص به خود را به صورت مجزا به نام Neat پیاده کرده است که خودش را با عنوان فریم ورک گرید سبک برای Sass و Bourbon صدا می زند . بنابراین بوربون به خودی خود هیچ سیستم گرید بندی ندارد و شما می توانید از Neat به نحو احسنت استفاده کنید .

در کل اگر به یک سیستم گرید نیاز دارید که خیلی به فریم ورک مورد استفاده تان بخورد پیشنهاد من این است : Bourbon + Neat . چون هر دو توسط افراد یک تیم با یک ایده واحد تولید شده اند ، درست مثل دو تکه یک پازل !

Helpers

یکی از ویژگی های جالب ناک فریم ورک های Sass این است که آنها غالبا Helper نیز ارائه می دهند . به طور کل Helper ها دستورات از پیش تعریف شده CSS هستند که شما می توانید آنها را به آسانی در شیوه نامه خود استفاده کرده و در زمان تان صرفه جویی کنید.

مثلا Compass یک helper برای عملیات float-clearing با مخلفات تدارک دیده است ، همچنین تعدادی هک css برای خانواده محبوب ie ، یکی css ریست (با تنظیمات مختلف) ، بعضی تکنیک ها برای جایگزینی تصاویر و کلی امکانات دیگر نیز منتظر شماست .

Bourbon این helper ها را Add-on می نامد اما امکانات به نسبت کمتری نسبت به Compass ارائه می دهد . البته می شود گفت Thoughtbot بسیاری از helper ها را در پروژه Bitters به صورت جداگانه قرار داده است .

Sprites

سعی کنید از یک کاربر Compass بپرسید که چرا برای ماه ها و سال هنوز دارد از کامپس استفاده می کند ؟ شرط می بندم در مورد تولید کننده sprite با شما حرف خواهد زد . این کار واقعا چیزی است که کامپس به خوبی از پس آن بر می آید . از آنجا که کامپس با Ruby نوشته شده است می تواند کارهایی جالبی با file system  سیستم عامل انجام دهد . یکی از آنها ساختن Sprite بر اساس یه پوشه از تصاویر است . چگونه این کار ار می کند ؟ ببینید

// Compass simple API to build sprites
@import "icon/*.png";
@include all-icon-sprites;

البته ساختن اتوماتیک CSS Sprites تنها هنرنمایی Compass نیست . کلی توابع کاربردی دیگر نیز فراهم شده است که به کاربر امکان می دهد به اطلاعات فایل تصویر در داخل شیوه نامه دسترسی یابد . مثل   image-width()یا image-height() و نیز inline-image() جهت کد کردن تصویر به صورت Base64 (تا بتواند داخل فایل css قرار داده شود)

// Compass functions accessing file system
.logo {
  $image: "path/to/my/logo.png";
  width: image-width($image);
  height: image-height($image);
  background: inline-image($image) no-repeat;
}

اما بوربون چون فقط بر پایه SASS طراحی شده است اصولا نمی تواند به فایل سیستم دسترسی یابد پس در نتیجه هیچ امکانی شبیه این ندارد.بنابراین اگر می خواهید به صورت داینامیک Sprite های تان را بسازید و نیز از تسک رانر (Task Runner) هایی مثل Grunt, Gulp, یا Ant استفاده نکنید ، انتخاب روشن است .

کلیات

برای اینکه مرجع سریعی داشته باشید ، مباحثی را که بحث کردیم در این جدول به صورت خلاصه می آوریم :

نتیجه نهایی

خوب حالا در پایان بالاخره Compass یا Bourbon ?

اگر از من بپرسید می گم : هیچ کدوم . من برای مدت زیادی کاربر Compass بودم ولی اخیرا به خاطر اینکه مورد استفاده قرار نمی گرفت رهاش کردم . حالا ترجیج می دم ابزارهای مورد استفاده خودم را فقط وارد پروژه Sass بکنم به جای اینکه کل یک فریم ورک را مورد استفاده قرار بدم .ولی این روش شخصی من هست . فکر می کنم در خیلی از موارد بهتر هست که از فریم ورک ها استفاده شود حداقل برای پروژه های بزرگ .

حالا تعداد زیادی محدوده وجود دارد که می تواند هنگام انتخاب یکی از اینها مهم باشد اما فکر می کنم مهم ترین سوالی که باید ابتدا از خودتان بپرسید این است که : آیا من به خصوصیات و ابزارهای کار با تصاویر نیاز دارم  (ساختن Sprite , طول و ارتفاع تصویر و …) ؟

کامپس برای این کار عالی است ولی باعث می شود سرعتش هم کم شود ، خیلی کم . بنابراین اگر نیازی به آن ندارید سراغ Bourbon بروید . چون به صورت دیوانه کننده ای سریع است و این به این خاطر است که به صورت ساده چیزی فراتر از دسته ای Mixin سس نیست .

همچنین اگر تصمیم گرفتید فریم ورک بوربون را انتخاب کنید توصیه می کنم از پروژه های دیگر تیم Thoughtbot هم در کنارش استفاده کنید : Neat به عنوان سیستم گرید ، Bitters به عنوان پایه (تایپوگرافی،متغیرها،قالب) و چرا که نه حتی Refills که رقیب Bootstrap به حساب می آید و دارای Component های زیادی است که می توانید در پروژه خود از آن استفاده کنید .

منبع