قطعا این مقاله برای کسانی هست که به چیستی و چرایی استفاده پیش پردازشگر ها در CSS اشراف دارند اما در انتخاب بین دو تکنولوژی ذکر شده دچار ابهام و شک هستند و یا قصد مطلع شدن از آخرین جایگاه این دو تکنولوژی در وب و یا بین توسعه دهندگان را دارند اما به هر حال برای برطرف شدن نیاز به اجرای آداب کلیشه ای و بی بهره نگذاشتن آن دسته از خوانندگانی که شاید اطلاعات کمتری داشته باشند در ادامه توضیح پیش پردازشگرها یک بار به مستقیم از MDN Web Docs موزیلا آورده شده و یک بار هم من فارسی توضیح میدم :
A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.
درواقع پیش پردازشگر های سی اس اس برنامه هایی هستند با سینتکس هایی مختص و منحصر به فرد به خود که به بر روی ماشین شما نصب شده و بسته به نوع شان یا دارای کامپایلر هایی هستند که سی اس اس تولید میکنند یا با کمک تکنولوژی هایی در زبان هایی مانند جاوا اسکریپت ترنسپایل میشوند به سی اس اس .
اما چرا پیش پردازشگر ها اصلا استفاده میشوند ؟ در پیش پردازشگر های سی اس اس قابلیت هایی به ما داده میشود که در سی اس اس ساده نیست مانند تعریف کردن تابع ، داشتن حلقه ، مپ کردن روی متغیر ها ، تابع های از پیش آماده کمکی ، تعریف متغیر ، تعریف قالب گونه هایی مانند پوسته برای تزریق استایل های دیفالت مانند مکان موقت نگه داری انیمیشن بدون داشتن نتیجه مستقل در خروجی و تنها صدا شدن در محل ایمپورت شده (mixin,placeholder) .
البته لازم به ذکر است که به مرور زمان در سی اس اس خام دارای تغییراتی رخ داده است و در حال پیشرفت نیز میباشد که ویژگی هایی مانند تعریف متغیر و چند چیز دیگر به سی اس اس اضافه شده است اما با این حال استفاده از پیش پردازشگرها سبب افزایش راندمان سرعت ، رعایت DRY و بسیاری از مزایای دیگر مانند تو در تویی در نوشتن استایل میشود.
ابتدا می توان مقایسه های کلی ای در مقیاس های متفاوت ببین Sass و PostCSS و حتی بعضی مواقع در باقی پیش پردازشگر های معمول مانند LESS , Stylus انجام داد سپس به بررسی ریز تر Sass و PostCSS پرداخت.
یکی از علت های محبوب شدن PostCSS نسبت به Sass این میباشد که در پست سی اس اس شما ابتدا پکیج اصلی رو از npm دریافت می کنید و سپس با توجه به نیاز استفاده از ویژگی خاصی می توانید آن را به صورت پلاگین ایمپورت کنید ( در واقع دوباره فیچر مورد نظر رو به صورت پکیج با npm ) . پکیج پایه به صورت خام پایه ترین امکانات رو پشتیبانی میکنه .
از این آدرس میتوانید لیست پلاگین های PostCSS رو مشاهده کنید
اما در Sass شما تمامی فانکشنالیتی هارو چه نیاز به استفاده آن داشته باشید چه نه به صورت کامل دارید و این تفکیک پذیری و امکان جدا سازی وجود ندارد .
یکی از برتری های Sass در اینجا سریع تر و متعدد بودن روش های پیکربندی و استفاده وجود دارد اما روند تنظیم کردن PostCSS در اسکیل کلی یک پروژه ممکن است یک مقداری گیج کننده باشد همچنین از لحاظ سینتکس Sass دارای ۲ سینتکس میباشد و در ورژن SCSS سینتکس کاملا مشابه سی اس اس میباشد با این تفاوت که قابلیت تو در تویی نیز وجود دارد اما در پست سی اس اس سیننتکس کمی متفاوت تر است.
این سهولت استفاده و پیکربندی sass در مقابل ناقص تر بودن از لحاظ دامنه فیچر ها نسبت به PostCss نیست بلکه تنها نقطه قوتی در sass هست و به این دلایل و دلایل دیگری مانند community های موجود در بحث پشتیبانی و دلایل دیگری که در انتهای پست در قسمت بررسی ریزتر ذکر شده Sass در محیط و زیرساخت های enterprise نسبت به باقی پیش پردازشگرها نیز بیشتر استفاده میشود .
همانطور که توی دو عکس بالا می ببینید PostCSS از ابتدای عرضه به مرور زمان دارای رشد با سرعت بالایی بوده به صورتی که تا ۲۸ ام February سال ۲۰۲۱ تقریبا ۴۲ میلیون دانلود و ۲۴ هزار ستاره ریپوزیتوری گیتهاب و wrapper های libsass , dartsass مجموعا ۵ میلیون و نیم دانلود و ۹ هزار ستاره ریپوزیتوری گیتهاب در npm داشته البته شایان ذکر است که sass طرق مختلف دیگری برای کامپایل شدن مانند استفاده از ابزار هایی مانند compass , koala و ... نیز دارد و تنها راه استفاده از آن استفاده از Wrapper های دارت و نود آن نیست اما این مقایسه صرفا جهت به نمایش کشیدن سرعت رشد استفاده و محبوبیت PostCSS انجام شده و دلیلی بر عملکرد ضعیف sass یا کمتر استفاده شدن نیست .
وبسایت State of css هرسال گزارشی برای تمامی مباحث،تکنولوژی،فریمورک و راهکارهای مربوط به css منتشر میکند که در ادامه قسمت مربوط به پیش پردازشگر هارو در دسته های مختلف بررسی میکنیم
همانطور که مشخص هست از لحاظ آگاهی تکنولوژی و مطلع بودن از آن هنوز Sass بعد از مدت ها بیشترین درصد را دارد
از لحاظ وسعت استفاده sass همانطور که مشخص است نیز بیشترین درصد را در ۲ سال اخیر داشته
رضایت استفاده توسعه دهندگان در ۲ سال اخیر در PostCSS نسبت به باقی پیش پردازشگر ها پیشرفت داشته
اما حالا بهتره PostCss رو یک بار تعریف کنیم : PostCSS ابزاری برای تبدیل CSS با پلاگین های JS است. این پلاگین ها می توانند از موارد زیادی پشتیبانی کنند.
همینطور Sass رو تعریف میکنیم : Sass اکستنشنی برای CSS است که قوانین تو در تویی، متغیرها ، mixins ، وراثت انتخابگر و موارد دیگر را به آن اضافه می کند.
همانطور که واضحه تعریف رسمی هر دو مشابه هم میباشد اما تفاوت اصلی که قبل تر ذکر نشد سرعت میباشد که به جز سرعت سریعتر پیکربندی Sass سرعت ترنسپایل و تبدیل در PostCss بیشتر هست .
همانطور که قبل تر گفته شد در Sass اگر از سینتکس SCSS استفاده بکنید تماما شبیه به سی اس اس می باشد و در صورتی که کسی ایده ای از پیش پردازشگر ها نیز نداشته باشد تنها با باز کردن فایل ها قابل فهم تر هست در پست سی اس اس نیز این امکان وجود دارد اما به دلیل استفاده زیاد و متداول در نتیجه برخورد بیشتر با مثلا :
@layer components , base {} , @apply
شاید بتوان گفت SASS در عین قوی بودن کاملا Beginner friendly نیز می باشد .
از لحاظ فیچر نیز می توان گفت تمامی ویژگی های مورد نیاز در یک پیش پردازشگر را هر دو دارا میباشند اما در حیطه های ریزتری مانند پریفیکس اضافه کردن برای خصیصه های CSS3 که برای پشتیبانی نیاز به پریفیکس دارند از آنجایی که PostCSS توسط تکنولوژی های جاوا اسکریپتی ای مثلا Babel ترنسپایل میشود در این پروسه autoprefix میتواند به عنوان پیکیجی وارد صحنه بشه و نیاز به نوشتن دستی پریفیکس نباشد اما از آنجایی که در اکثر ادیتور/IDE های مدرن اکستنشن هایی برای پریفیکس هست باز هم نیاز به دستی نوشتن آن نمیشود اما نکته مهم از این سناریو هندل کردن پریفیکس نیست بلکه پترنی هست که اینجا وجود داره اگه دقت کنید Sass تمامی ویژگی های مورد نیاز رو کامل درون کامپلایر خودش داره اما فقط همون ها هست و فیچر های دیگه باید در آپدیت های رسمی اضافه شود البته منظور این نیست که نشود ماژولی اضافه کرد به امکانات Sass امکانش وجود دارد اما از لحاظ پیچیدگی زمان برتر است نسبت به PostCSS چون PostCSS ما مایندستی طراحی شده که به صورت راحت در صورت نیاز پکیج های مورد نیاز رو میتوانید اضافه کنید حالا در مثال بالا آتوپریفیکسر بود اما میتواند هرچیزی باشد .
نکته حائز اهمیت دیگر این است که Sass توسط خیلی از پروژه های front-end مستقیما استفاده شده مانند bootstrap و یا حتما در فریمورک خود از Sass پشتیبانی میکنند این ویژگی برای PostCSS هم صدق میکند اما در مقیاس کوچکتر .
از آنجایی که تمرکز این مقاله بر رو توضیح و شکاف عمیق این ۲ پیش پردازشگر نیست در صورت علاقه برای مطالعه بیشتر میتوانید به مستندات مربوط در لینک های زیر مراجعه کنید :
مستندات Sass
مستندات PostCSS
نمیدونم منظور از نتیجه گیری نهایی چه چیز هایی می تواند باشد چون همیشه این دیدگاه در استفاده از تکنولوژی ها وجود دارد که بهتری یا برتری ، مقایسه در فاکتور و مقیاس های غیر قابل ارزش و غیر ضروری انجام میشود بنظر من درست تر این هست که ویژگی و توانایی های یک تکنولوژی رو بدانیم و بسته به نیاز ها و اسکیل مشکل از جعبه ابزار تکنولوژی موردنیاز رو انتخاب کنیم پس یعنی اگر به جفت این تکنولوژی ها مسلط باشیم انتخاب درست تری هست و به این مقایسه بیشتر به دید سنجش وضعیت کلی در وب و بررسی ویژگی های منحصر به فرد آنها نگاه کرد .
در نهایت با داشتن اطلاعات مقایسه شده بالا در ذهن میتوان برای سناریو های مختلف تصمیم گیری بهتری کرد و پاسخ بهتری به پرسش هایی مانند پرسش زیر داد :
پروژه های با اسکیل اینترپرایز تر بهتره از کدام پیش پردازشگر استفاده کنند ؟
منابع :
اگر مطلبی گنگ بود و نحوه بهتری برای بیان کردن دارد ، اشتباه تایپی و یا پیشنهادی برای اضافه شدن مطلبی دارید در کامنت نظرتون رو بنویسید ممنون .
