آموزش پیش پردازنده Sass – هر آنچه باید بدانید – بخش اول

این روزها اگه نگاهی به آگهی های استخدام برنامه نویس فرانت اند بندازید، می بینید که توی بسیاری از اونها، در بخش مهارت های مورد نیاز، به پیش پردازنده های Css، مثل Sass و Less اشاره شده. به این معنا که شما برای بدست آوردن شغل مورد نظر، باید بتونید با یکی از پیش پردازنده ها کار کنید.

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

سعی میکنم توی این مجموعه پست ها، تا حد کاملی Sass رو آموزش بدم و منبع این آموزش ها هم کتاب CSS: The Missing Manual هست که چاپ چهارم اون در سال ۲۰۱۵ منتشر شده و کتاب بسیار خوبیه.

Sass چیست ؟

قبل شروع هر کاری، باید بدونیم که اصلا با چه چیزی قراره سر و کار داشته باشیم. Sass ( به شکل سَس خونده میشه ) بعنوان یک پیش پردازنده یا CSS Preprocessor شناخته میشه. به این معنا که شما میتونید اول از همه کدهای استایل رو در قالب Sass بنویسید و بعد اونها رو به CSS تبدیل کنید.

عبارت Sass مخفف Syntactically awesome style sheets هست. ترجمه فارسی مناسبی براش پیدا نکردم ولی شاید بشه اینجوری ترجمه ش کرد: “ برگه های طرح و استایل که از لحاظ دستوری و نحوی خیلی باحال و خوبن! ” ( واقعا چقدر خوب که من مترجم نشدم )

مزایای استفاده از Sass

وقتی اولین بار تعریف Sass رو خوندم، با خودم گفتم خب که چی؟ من که بلدم CSS بنویسم، پس چرا باید یه واسطه اضافه کنم و کار رو پیچیده تر کنم؟

واقعیت اینه که Sass کار رو برای طراح ها و برنامه نویس های فرانت اند راحت تر میکنه. موارد پایین، بخش از کاربرد های اون محسوب میشن:

• Sass باعث میشه که بتونید فایل های استایل رو در بخش های کوچیکتر و مرتب تری بنویسید. اما چرا این موضوع مهمه؟
  این روزا برنامه نویس های خوب فرانت اند سعی میکنن تعداد فایل های Css کمتری رو روی سایت بارگذاری کنن تا سایتشون سبکتر باشه و سریعتر لود بشه. بخاطر همین، تا جایی که ممکنه کدهای استایل رو تجمیع میکنن و یه دفعه ممکنه با یک فایل CSS روبرو بشن که تعداد زیادی خط کد داره.
  حالا اگه بخواین یه بخشی از این کد رو تغییر بدید، ( مثلا تگ h2 در ساید بار صفحه تماس با ما ) حتی پیدا کردنش توی این حجم از کد، کار سخت و گیج کننده ایه.
  اما Sass باعث میشه که بتونید بخش های مختلف کدهای استایل رو توی فایل های جداگانه بنویسید و خودش موقع کامپایل کردن، تمام این فایل ها رو یه جا جمع میکنه. پس دیگه شما لازم نیست با اون چند صد یا هزار خط کد سر و کله بزنید و هر زمان که خواستید یه بخشی رو تغییر بدید، دقیقا میدونید کدوم استایل توی کدوم فایله و مستقیم میرید سراغش!
• Sass فایل CSS نهایی رو فشرده میکنه و حجمش رو پایین تر میاره، که این موضوع روی سرعت سایت شما تاثیر خیلی خوبی داره.
• فرض کنید توی یه شرکت کار میکنید که رنگ تجاریش اون یه نوع خاصی از بنفشه ( چقدر من از این رنگ خاطره بدی دارم ). شما قالب سایت رو میزنید و بارها از اون کد رنگ خاص توی قالب استفاده میکنید.
  حالا فکر کنید شرکت به هر دلیلی تصمیم میگیره رنگ رو عوض کنه. حالا شما باید دونه دونه کدهای رنگ قبلی رو پیدا کنید و تغییر بدید!
  اما اگه از Sass استفاده کنید، میتونید یه متغیر تعریف کنید، کد رنگ رو داخل اون بریزید، و اون متغیر فرضی رو همه جا استفاده کنید.
  اینطوری، اگه قرار باشه یه تغییر عمده توی سایت بدید، فقط کافیه مقدار اون متغیر رو عوض کنید و بقیه کار رو Sass براتون انجام میده ( یکی از کابوس های من توی این کار، تغییرهای این شکلی بود که الان حل شده. خدا پدر و مادر تیم سازنده رو بیامرزه )
• Sass کمک میکنه که کد کمتری بنویسید. بعضی جاها پیش میاد که ما چند خط تکراری رو باید چند بار توی کدهامون به کار ببریم. مثلا، برای نوشتن پیشوند های مربوط به مرورگر ( vendor prefixes ) ما به جای اینکه اونها رو چندین بار کپی و پیست کنیم، میتونیم از Sass کمک بگیریم و فقط یه خط کد بنویسیم که تمام این پیشوندها رو در خودش ذخیره کرده و بعد، بقیه کار رو به Sass میسپاریم.

مزایای Sass به این موارد محدود نیست و به مرور و طی مقاله های دیگه، با تمامی اونها آشنا میشیم. اگر هم که خیلی برای اطلاعات بیشتر عجله دارید، میتونید به سر به سایت رسمی Sass بزنید: www.sass-lang.com

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

معایب استفاده از Sass

از اونجایی که هر خوشگلی، یه عیبی هم داره، باید بگیم که متاسفانه Sass هم از این قاعده مستثنی نیست. اگه بخواین با این پیش پردازنده کار کنید، باید با چند تا مساله دست و پنجه نرم کنید:

1. استفاده از Sass، مستلزم اینه که چند تا مفهوم جدید یاد بگیرید. این قضیه، برای یه برنامه نویس خوب، کاملا عادیه، ولی طبیعتا باید زمان و انرژی براش صرف بشه. چیزی که یه برنامه نویس تنبل، ممکنه دوست نداشته باشه.
2. برای اینکه Sass روی سیستم تون اجرا بشه، باید اول از همه چند تا چیز رو نصب کنید. Sass با استفاده از زبان برنامه نویسی Ruby کار میکنه، پس شما باید Ruby رو روی کامپیوترتون نصب کنید.
3. Sass مثل برنامه های دیگه عمل نمیکنه که بتونید روش دبل کلیک کنید و اجرا بشه و تمام! بلکه برای استفاده، باید از command line کمک بگیرید. ( command prompt در ویندوز یا ترمینال در مک )

راه بی دردسر اجرای Sass

به عنوان نکته پایانی، میخوام اشاره کنم که نیازی نیست خیلی نگران نصب و اجرای Sass باشید.
من از ادیتور VS Code استفاده میکنم و یک پلاگین خیلی خوب برای اجرا و کامپایل فایل های Sass داره به اسم Live Sass Compiler که بهتون اجازه میده بدون اینکه درگیر جزئیات نصب روبی و کامند لاین بشید، کدهای Sass رو بنویسید و تا جایی که میدونم، برای ادیتور اتم هم چنین افزونه ای وجود داره.
قاعدتا، برای باقی ادیتور ها هم باید این امکان فراهم باشه و با یه سرچ کوچیک توی گوگل، میتونید بهشون دسترسی پیدا کنید.

ادامه بحث آموزش Sass رو توی مقالات بعدی دنبال کنید.