معرفی پلتفرم‌های less و scss

در مباحث برنامه‌نویسی، اصطلاحی تحت عنوان DRY به معنی خودت را تکرار نکن، اصول کار برنامه‌نویس‌ها است. اما مفهوم این اصطلاح چیست؟ در علم برنامه‌نویسی برای استفاده مجدد از یک قطعه کد، آن‌ را در فانکشن یا یک کلاس تعریف می‌کنند و هر جایی که نیاز بود، فانکشن مورد نظر را فراخوانی می‌کنند و یا اینکه شی جدیدی از کلاس تعریف می‌شود. با رعایت اصل DRY دیگر نیازی به اعمال تغییر در بخش‌های دیگر کد نداریم. به همین دلیل رفع ایراد برنامه و توسعه برنامه راحت‌تر می‌شود.

در CSS نیز بهتر است تا حد امکان از نوشتن کدهای تکراری بپرهیزیم. با اینکه CSS برای استایل‌دهی به صفحات وب بسیار مناسب است اما چون کدهای آن از پیش‌تعریف‌شده است و چندین بار تکرار می‌شوند، پس شما به ناچار کدهای تکراری وارد می‌کنید. این موضوع زمانی مشکل‌ساز می‌شود که پروژه شما بزرگ باشد. در چنین پروژه‌هایی مدیریت استایل صفحات وب سخت خواهد شد. اما چاره کار برای پروژه‌های بزرگی مانند طراحی سایت آگهی چیست؟ برای اینکه به بهترین روش ممکن CSS صفحات وب خود را بنویسیم و از تکرار بیش ‌از ‌اندازه کدها بپرهیزیم، پیش‌پردازنده‌ها بهترین گزینه هستند.

پیش‌پردازنده چیست؟

پیش‌پردازنده علاوه بر اینکه همه ویژگی‌های CSS را دارد، ویژگی‌های بیشتری از جمله متغیرها، ارث‌بری، فانکشن‌ها، ترکیب کدها و ... را نیز دارد. پس در تعریف پیش‌پردازنده‌ها می‌توان گفت که آن‌ها به نوعی نسخه گسترش‌یافته CSS هستند. استفاده کردن از پیش‌پردازنده در ظاهر وب‌سایتی که طراحی می‌کنید تفاوتی ایجاد نمی‌کند و در واقع کاربر اصلا متوجه آن نمی‌شود اما باعث افزایش کارایی و سرعت کدنویسی CSS خواهد شد.

کارایی پیش‌پردازنده را با یک مثال کمی ملموس‌تر می‌کنیم. فرض کنیم ما باتوجه به سلیقه و خواست مشتری طراحی سایت هتل انجام داده‌ایم و بعد از گذشت چند ماه او قصد عوض کردن تم رنگ کلی وب‌سایت را دارد. مثلا از رنگ آبی به رنگ بنفش تغییر پیدا کند. در حالت عادی باید تمام فایل‌ها و کدهای CSS سایت برای نسخه دسک‌تاپ و موبایل و تبلت را بررسی کرده و کد رنگ را تغییر بدهیم. با توجه به اینکه بعضی پروژه‌ها تا چندهزار کد خط هم دارند، این کار چقدر طول می‌کشد؟! در این بین احتمال خطای انسانی و اشتباه و پاک شدن کدها را هم در نظر بگیرید. قطعا اتفاق جالبی نخواهد افتاد. اما با استفاده از پیش‌پردازنده ما می‌توانیم متغیر تعریف کنیم. پس یک متغیر برای رنگ اصلی تعریف می‌کنیم و در هر جایی که خواستیم از آن استفاده می‌کنیم. حالا برای تغییر رنگ، مقدار متغیر را تغییر می‌دهیم و در کل برنامه مقدار تغییر می‌کند. 

پیش‌پردازنده‌هایی مانند less ,sass ,Stylus برای CSS وجود دارد که دو مورد آخر یعنی less ,sass موضوع بحث این مقاله ودیانا هستند. نکته‌ای که باید به آن توجه داشت این است که مرورگرها فقط زبان CSS را می‌فهمند و کار پیش‌پردازنده این است که کدی را گرفته و به کد دیگری تبدیل کند. پس هیچ کدام از این پیش‌پردازنده‌ها را نمی‌توان به‌عنوان جایگزینی برای سی‌اس‌اس دانست.

شباهت‌های پلتفرم‌های less و sass

متغیرها: مانند زبان‌های برنامه‌نویسی در این پیش‌پردازنده‌ها هم می‌توانیم اطلاعات را در متغیرها ذخیره کنیم و هر زمان که خواستیم که از آن‌ها استفاده کنیم. هنگامی که قصد فراخوانی متغیرها را داریم، فقط کافی ست تا نام متغیر را بنویسیم.

وراثت: وراثت یک ویژگی خیلی خوب است که هم برنامه‌نویسی را آسان می‌کند و هم تعداد کدها را کاهش می‌دهد. کد کمتر به معنای سایت سبک‌تر و طراحی سایت حرفه ای است. وراثت همانطور که از نامش پیدا است امکان رسیدن اطلاعات از یک سلکتور به سلکتور دیگری را فراهم می‌کند.

حلقه‌ها: حلقه‌ها دستور مورد نظر ما را انقدر تکرار می‌کنند تا به وضعیت مورد نظر را برسند.

گروه‌بندی کدها: minix یا گروه‌بندی کدها، همان تمپلت‌ها هستند. ما می‌توانیم خودمان گروه‌بندی‌ها را ایجاد کنیم و یا اینکه از فریمورک‌ استفاده کنیم و آن‌ها را به کد اضافه کنیم.

دستورهای تودرتو:کدهای تودرتو یه آپشن خوب برای جلوگیری از نوشتن کدهای تکراری است. ما در سی‌اس‌اس نمی‌توانیم از دستورهای تودرتو استفاده کنیم. اما با استفاده از پیش‌پردازنده‌ها می‌توانیم از کلاس‌های تودرتو استفاده کنیم و دیگر خبری از کدهای تکراری و زیاد نیست.

فانکشن‌ها: برای کنترل و مدیریت مواردی مانند اندازه داده‌ها و متغیرها، از فانکشن استفاده می‌کنیم. همانطور که می‌دانید، فانکشن‌ها طراحی و پیاده‌سازی را ساده می‌کنند. مثلا می‌توانیم از فانکشن‌های ریاضی مثل جمع و تقسیم استفاده کنیم. فانکشن‌ها در طراحی سایت اختصاصی نقش مهمی دارند و استفاده از آن‌ها کدنویسی را بهتر و اصطلاحا تمیزتر می‌کند.

تفاوت‌های پلتفرم‌های less و sass

• پیام خطا یکی از مهم‌ترین بخش‌ها برای برنامه‌نویس است. چرا که با استفاده از آن‌ مشکل را پیدا کرده و رفع و رجوع می‌کند. کار توسعه‌دهنده با less راحت‌تر است چرا که ارورها در این پلتفرم دقیق‌تر نمایش داده می‌شوند.
• پیمایش less در حلقه‌ها فقط روی داده‌های عددی امکان‌پذیر است اما less یک سطح بالاتر است و پیمایش روی تمام نوع داده‌ها قابل انجام است.
• less زبان سمت کاربر است و کامپایلر اصلی آن با جاوا اسکریپت نوشته شده است.  فقط یک مشکل اینجاست که اگر کاربر جاوا اسکریپت را غیرفعال کند، با مشکل روبرو می‌شود. اما از طرفی نصب و راه‌اندازی آن به سادگی لینک‌ کردن یک فایل جاوا اسکریپت است.
  در مقابل sass زبان سمت سرور است و فقط روی ruby اجرا می‌شود. Ruby روی سیستم‌های مک به صورت پیش‌فرض نصب شده است ولی در ویندوز به کمک cmd و یا نرم‌افزار گرافیکی قابل نصب است.
• یکی از بارزترین تفاوت‌ها بین less و sass در فانکشن‌های منطقی است. در پلتفرم sass ما می‌توانیم از دایرکتیو mixin استفاده کنیم اما در less دقیقا مانند یک سلکتور کلاس تعریف می‌کنیم. در واقع less چنین قابلیتی را دارد که وقتی شرایط خاصی اتفاق افتاد، mixins را فعال کند.
• هنگام کار کردن با sass بین استفاده از intended syntax و sass حق انتخاب داریم. حق انتخاب بین اینکه آیا به اصول اصلی وفادار باشیم و یا اینکه به قانون و قواعد CSS پایبند نباشیم. در پلتفرم less چنین چیزی وجود ندارد و باید با اصول و قواعد قدیمی خود را تطبیق بدهیم.